⏱️
Vue3-timepickerの時刻がリアクティブにならない
Vue3-timepickerとは
Vue3用の時刻選択プラグインです。
今回、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