Vue.js 에러 Error compiling template: v-bind:value conflicts with v-model

 

 

- body -

<tr>
    <th>모델명</th>
    <td colspan="1"><input type="text" class="inputTxt p100" name="sales_nm" v-bind:value="sales_nm" disabled/> </td>
    <th>주문 수량</th>
    <td colspan="1"><input type="number" min="1" class="inputTxt p100" name="pur_cnt" v-bind:value="pur_cnt" v-model="pur_cnt" /> </td>
</tr>

v-bind와 v-model는 한 태그 안에 동시에 쓰지 못한다.
이유는 둘은 기능이 겹쳐서 충돌하기 때문이다.
v-bind는 value를 넘겨주는 것이고
v-model는 value를 주거나 받기를 연동한다.
따라서 함께 쓰면 에러가 난다.

값을 넘겨 줘야 할 때와 받아야 할 때 서로 다른 처리를 거쳐야 한다면,
v-bind:value 를 v-on:input, v-on:change 등의 이벤트 디렉티브와 함께 쓰면 된다.

- 220426