Vue.js3系でTimepickerを使う場面がありvue3-timepickerをインストールして使ってみたのですが、うまくv-modelが反映されず躓いたので備忘録を残しておきます。
vue3-timepickerの使い方
基本的に使い方はvue2-timepickerのdemoを見ていただければわかりますが、templateタグの中で以下のように記述するとtimepickerが使えます。
<vue-timepicker v-model="form.time"></vue-timepicker>躓いたところ
axios等でデータを取得してv-modelに反映させたかったのですがtimepickerに反映させたかったのですが、なぜかリアクティブに値が変わらず。。。
<vue-timepicker v-model="form.time"></vue-timepicker> //axiosで取得したデータがv-modelに反映されない。。。解決策
timepickerに:keyバインディングを追加することで解決しました。
:keyの値はメソッド等で変更する値を入れてください。そうするとv-modelの値が更新されるようになります。
<vue-timepicker :key="hogehoge" v-model="form.time"></vue-timepicker>関連記事
