[Vuejs] <input> 태그에 입력한 전/후 value 받아오기 (Vuejs get old value when on change event)

 

 

input 박스를 이용하여 데이터를 입력했을 때, 기존 값과 새롭게 입력한 값을 비교하여야하는 경우

 

처음엔 하단과 같이 v-model에 걸어 데이터를 셋팅한 후, @input 이벤트를 이용하여 받아오려고 했으나

계속해서 new 값만 받아올 뿐, old 값은 전달되지 않았다.

 

 

기존코드

<template v-for=(data, index) in table.data) :key=index>
  <tr>
    <td><input v-model="data.field1" @input="changeValue($event, data)"></input></td>
   </tr>
</template>

---

 

해결

 v-model 대신, :value로 데이터를 셋팅해준 후, @change 이벤트를 걸어 가져올 수 있다.

 input 엘리먼트에서 v-model을 사용하는 경우, 데이터를 바인딩하며 입력 내용에 대한 양방향 모델 바인딩이 바로 가능하지만, :value(v-bind)을 사용하는 경우에는 그렇지 못하기 때문에 $event를 걸어 target value를 가져온 후, 데이터 값을 따로 변경해주어야 한다.

 v-model = v-bind:value + v-on:input

<template v-for=(data, index) in table.data) :key=index>
  <tr>
    <td><input v-model="data.field1" :value="data.field1" @change="changeValue(data, $event)"></input></td>
   </tr>
</template>

 

나의 경우 old, new data가 다를 때, 글자 색을 변경해주어야했다.

 const changeValue = (item, event) => {
  console.log(item.field1) //old data
  console.log(event.target.value) //new data
  item.field1 !== event.target.value ? (event.target.style.color = 'red') : (event.target.style.color = 'black');
 }

 

 

---

+ 문제점

  v-model도 함께 걸어버리니 vue compile error가 떨어진다. v-model도 걸어야하는데 어떡하지? 흠