自社プロダクトのフロントエンドでVue.jsとVuetifyを使っています。
Vuetifyのテキストフィールド(v-text-field)でv-model.lazyを適用したら、挙動が.lazy修飾子がない場合の挙動と同じだったので調べて分かったことをメモ_φ(・_・
Vue.jsの公式ドキュメントよりv-model.lazyは
デフォルトでは、 v-model は各 input イベント (上記の IME 確定前を除いて) 後に、データと入力を同期します。 change イベント後に同期するように変更するために lazy 修飾子を追加することができます
とのことなので、以下のようにVuetifyのテキストフィールド(v-text-field)にも同じように適用したら、inputのたびに更新処理が走り、期待する動作(changeイベントで更新)になりませんでした。
<v-text-field v-model.lazy="name"></v-text-field>
さらに調べると、以下のGithubのissuesに辿り着き、v-modelの修飾子はVuetify等のカスタムコンポーネントではサポートしていないということが分かりました。
v-text-field v-model lazy doesn't work #1810
v-modelはv-onとv-bindをまとめて一行で書くためのシュガーシンタックスなので、v-onとv-bindをそれぞれ書き分けることで、changeイベントで更新が発動する処理が実現できました。
<v-text-field :value="name" @change="value => name = value"></v-text-field>
<script>
props: {
person: Object
},
computed: {
name: {
get () {
return this.person.name
},
set (name) {
this.$emit('change', name)
}
}
}