양방향 데이터 바인딩

vue에서 양방향 데이터 바인딩은 v-model 디렉티브로 손쉽게 구현할 수 있다.

<template>
  <h1>{{ msg }}</h1>
  <input
    type="text"
    v-model="msg" />
</template>

<script>
export default {
  data() {
    return {
      msg: 'hello'
    }
  }
}
</script>

하지만 한글 입력시 데이터가 반영되는 것에 지연이 생긴다.
이것은 한글 특성상 초성,중성,종성 모두 입력이 되어야 하나의 글자가 완성되는 특징 때문이다.

아래 이미지처럼 바로바로 데이터에 반영이 안된다.

데이터 반영 되는 것이 지연이 되면 예상치 못한 입력 오류가 발생할 수 있기에 맞춰주는 것이 좋다.

한글 입력 대응

한글 입력시엔 input 이벤트로 사용자의 입력을 바로바로 반영시켜줄 수 있다.
조금 번거로운 방법이지만 input 이벤트로 value 값을 받자마자 즉시 데이터에 할당하는 방식이다.

<template>
  <h1>{{ msg }}</h1>
  <input
    type="text"
    :value="msg"
    @input="handler" />
</template>

<script>
export default {
  data() {
    return {
      msg: 'hello'
    }
  },
  methods: {
    handler(e) {
      this.msg = e.target.value
    }
  }
}
</script>

핸들러 함수 없이 아래처럼 간략히 처리할 수도 있다.

<template>
  <h1>{{ msg }}</h1>
  <input
    type="text"
    :value="msg"
    @input="msg = $event.target.value" />
</template>

<script>
export default {
  data() {
    return {
      msg: 'hello'
    }
  }
}
</script>