양방향 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>