[Vue.js] input 태그에 데이터 바인딩하기(feat. v-model, type, :value)

먼저 공식 사이트의 내용을 들고와보자면

 

<input v-model="message" placeholder="여기를 수정해보세요">
<p>메시지: {{ message }}</p>

 

출저: https://v2.ko.vuejs.org/v2/guide/forms.html#%EB%AC%B8%EC%9E%90%EC%97%B4

 

이런식으로 생긴 것이 나오는 것을 알 수 있습니다.

 

v-model 을 고집하며 제가 만든 코드는

<td><input v-model="user.HP_NO"/></td>

 

이러한 코드였습니다.

 

이러한 코드의 문제점은 1글자만 수정해도 커서가 끊기는 현상이였습니다.

 

10000이 있는데 11111로 바꾸고자하면 다 지우고 11 다시 클릭해서 111 다시 클릭해서 1111 ... 이런식으로 동작을 하는 것입니다.

 

이것 저것을 시도해 본 결과

<td><input type="text" :value="user.HP_NO"/></td>

 

type을 text로 선언하고 :value를 이용하여 데이터를 바인딩해주면 제대로 동작하는 것을 확인할 수 있었습니다.

 

단순 조회용도라면 위처럼 만들어도 상관없지만

 

수정하거나, 저장을 할 때 위처럼 만들면 데이터가 넘어가지 않습니다.

 

또 한번의 수정을 한 결과

<td><input type="text" v-model="user.HP_NO"/></td>

 

이러한 코드였습니다.

 

이렇게 만들면 조회, 수정, 저장 등 데이터 이동도 가능한 input 태그의 완성입니다.