时间戳

首页 > 解决方案 > 如何在 vue2-datepicker 中更新日期

vue.js - 如何在 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

标签： vue.jsdatepicker

解决方案

如果在这种情况下，您的按钮位于 内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)
  }
}

您可以在此处看到类似的操作。

如果您想实现反应性，那么您可以执行以下操作：

添加额外的数据属性：

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

然后在您的 HTML 模板中，您将另外传递indexwithclick事件，以便能够在我们的myDates对象中创建唯一的键值对：

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

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

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

你可以在这里看到它是如何工作的。

推荐阅读