如何在vue2-datepicker中更新日期

问题描述

我正在使用Vue2-datepicker程序包，插入数据效果很好，但是如何更新日期

      <template>
<div>
        <div v-for="shop in shops" :key="shop.id">
          <date-picker v-model="shop.start_date" valueType="format"></date-picker>
    <button @click="preparePayload">Update</button>
        </div>
</div>
        </template>
        export default {
          components: {
            DatePicker
          },data: function() {
            return  {
            start_date:''
        };
                  },methods: {
                  preparePayload() {
                  var form = document.getElementById('shop');
                  var payload = new FormData(form);
                  payload.append('start_date',this.start_date);
                  this.updateShop(payload);
                  .....
                 }
            },};
            </script>

它总是返回null

解决方法

如果在这种情况下，您的按钮位于v-for内，则可以尝试将date的值直接传递给函数：

假设您的数据如下所示：

data() {
    return {
      shops: [{ start_date: null },{ start_date: null },{ start_date: null }],}
}

然后在您的HTML模板中：

<div v-for="(shop,index) in shops" :key="index">
    <date-picker v-model="shop.start_date" valueType="format"></date-picker>
    <button @click="preparePayload(shop.start_date)">Update</button>
</div>

然后使用您的方法：

methods: {
  preparePayload(date) {
    console.log(date)
  }
}

您可以在操作here中看到类似的内容。

如果要实现反应性，则可以执行以下操作：

添加其他数据属性：

data() {
    return {
      shops: [{ start_date: null },myDates: {}
    }
}

然后在HTML模板中，您还需要将index与click事件一起传递，以便能够在我们的myDates对象中创建唯一的键值对：

<button @click="preparePayload(item.start_date,index)">Update</button>

最后，在您的方法中，您可以使用$set：

preparePayload(date,index) {
   this.$set(this.myDates,`newDate${index}`,date);
}

您可以看到here的工作原理。

datepicker datepicker vue.js