Vue.js / Nuxt.js

【Vue】dataに変化があった際にdatepickerの値が空になってしまう問題

Vueでdaepickerのinputを動的に増やした際に
入力されていた値が消えてしまう問題に直面した

対処法

  • data-indexをdatepickerを適応する要素に追加する
 <div v-for="(date, index) in dates" :key="date">
        <input type="text"
               :data-index="index"
               class="js-datepicker"
               v-model="date"
        />
</div>

  •  nextTickを使用して、データ変更後に更新されたDOM対してdatepickerの設定を行う
    この際に、すでに入力されているものに対してはdata-inedxから元の値を再度反映する
methods: {
  applyDatepicker() {
      this.$nextTick(() => {
        $('.js-datepicker').datepicker({
          dateFormat: 'yy/mm/dd',
          onSelect: (dateText, inst) => {
            const elementIndex = $(inst.input).data('index');
            this.items[elementIndex].date = dateText;
          }
        });

        $.datepicker.regional['ja'] = {
          dateFormat: 'yy/mm/dd',
        };
        $.datepicker.setDefaults($.datepicker.regional['ja']);
      });
    },
}

  • mounted,updatedの際に上記メソッドを呼び出す
  mounted() {
    this.applyDatepicker()
  },
  updated() {
    this.applyDatepicker();
  },

\ 案件のご依頼・ご相談はこちらから /