[VUE] v-model 주의사항

양방향 v-model, 코드의 간결함은 있지만 한글 입력시 한글자가 모두 완성될 때 반응성이 일어난다. (한글 입력 이슈)

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

<script>
export default {
  data() {
    return {
      msg: 'Hello world!',
      checked: false
    }
  },
  
}
</script>

한글 이슈가 있는 프로젝트는 아래와 같이 단방향 @input을 이용하여 데이터 반응성을 일으킨다.

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

<script>
export default {
  data() {
    return {
      msg: 'Hello world!'
    }
  },
  
}
</script>