[vue: worklist 제작] 2-3-2. 경로 수정버튼

<input type="text" 
  v-if="iaValList['mode']=='modi'" 
  :value="iaVal"
  @blur="updatePath(iaValList, $event.target)">
<a v-else ...>{{iaVal}}</a>
<button type="button" 
  v-if="isModify && iaValList['mode']!='modi'" 
  @click="pathModi(iaValList)"
  >링크수정</button>

 

 

링크수정 버튼 클릭시 임시로 해당 row에 mode라는 항목과 modi 값을 넣어준다

이 값은 링크가 수정완료 되면 사라진다

pathModi : function(row){

  row['mode'] = 'modi';

},

iaValList['mode']가 modi이면 input이 보여져서 경로를 수정할수 있다

수정이 완료되고 focus가 떠나면(blur)

mode는 초기화하고

path에 새로운 경로는 sendNewIA로 store에 보내서 메인 IAdata를 수정한다

mode가 modi가 아니기때문에 input은 가려지고 a링크가 보여진다

updatePath: function(data,target){

  data['mode'] = '';

 

  let row = data;

  row['worklist-path'] = target.value;

  this.sendNewIA(row);

},