⏱️
Vue3-timepickerの時刻がリアクティブにならない
Vue3-timepickerとは
今回、vue2-timepicker
からvue3-timepicker
へマイグレーションしたところ、躓いた箇所があったので共有します。
v-modelがリアクティブにバインドされない
<vue-timepicker v-model="value" />
v-model
が非同期な値などの場合、
value
が更新されても時刻が変更されません。
対処方法
:key
を追加し、コンポーネントを強引に再マウントします。
<vue-timepicker v-model="value" :key="refresh" />
例えば、
watch
関数でvalue
が変更された時にrefresh
を更新すると、
vue-timepicker
コンポーネントが再マウントされ正しい値がバインドされた状態で表示されます。
参考issue
Discussion