如何在 vue2-datepicker 中更新日期

Question

我正在使用 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

Answer 1

如果在这种情况下，您的按钮在 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 }, { start_date: null }, { start_date: null }],
      myDates: {}
    }
}

然后在您的 HTML 模板中，您将另外传递 index with click 事件，以便能够在我们的 [=19= 中创建唯一的 key-value 对] 对象：

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

最后，在你的方法中你可以使用 $set:

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

你可以看到它是如何工作的here。

如何在 vue2-datepicker 中更新日期

How to update date in vue2-datepicker

datepicker

vue.js