[vue.js 기초] 폼 입력 바인딩 v-model 사용하기 / 한글 문제점 해결

vue의 form 입력

v-model은 input과 textarea에 양방향 데이터 바인딩을 가능하게 한다.

단 , v-model은 form 엘리먼트의 초기 value값을 무시하므로 컴포넌트 데이터 안에 초기값을 선언해줘야 한다.

<div id="app">
  <input v-model="message">
  <p>메시지: {{ message }}</p>
</div>

new Vue({ el: '#app', data: { message: '' } });

 

자세한 예제는 기술문서에 나와있으므로 참고

폼 입력 바인딩 — Vue.js

 

한글 실시간 반영 안되는 문제점

원래 이 속성을 사용하면 메세지가 실시간 반영되도록 할 수 있지만, 중국어, 일본어, 한국어는 특성상 한 글자 느리게 반영된다.

그래서 input 속성으로 사용해 주어야 함.

<div id="example">
    <input v-on:input="typing" v-bind:value="message" placeholder="여기를 수정해보세요">
    <p>메시지: {{ message }}</p>
</div>

var vm = new Vue({
  el: '#example',
  data: { message:'안녕하세요' },
  methods: { typing(e) { this.message = e.target.value } }
})