如何在 el-date-picker 中 v-model 绑定数组报红？

Question

在 el-date-picker 中 v-model 绑定数组报红，但程序能运行，求解惑！

这是绑定的表单

表单的类型

报错提示如下：

Answer 1

【以下回答由 GPT 生成】

为什么在 el-date-picker 中使用 v-model 绑定数组会报错？请问如何解决该问题？（Vue.js）

在使用 el-date-picker 组件时，不能直接将 v-model 绑定到一个数组，因为 el-date-picker 组件期望一个单一的值而不是一个数组。

解决该问题的方法是使用一个中间变量来存储日期，然后在必要时将其添加到数组中。以下是一个示例代码：

<template>
  <div>
    <el-date-picker
      v-model="datePickerValue"
      type="date"
      placeholder="选择日期"
      :clearable="false"
      @change="handleDateChange"
    ></el-date-picker>
    <el-button @click="addDate">添加日期</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      datePickerValue: '',
      selectedDates: []
    };
  },
  methods: {
    handleDateChange(val) {
      this.datePickerValue = val;
    },
    addDate() {
      if (this.datePickerValue) {
        this.selectedDates.push(this.datePickerValue);
        // 清空日期选择器
        this.datePickerValue = '';
      }
    }
  }
};
</script>

在这个示例中，我们使用 datePickerValue 变量作为日期选择器的值，然后在日期改变时更新该变量。然后，通过 addDate 方法将选定的日期添加到 selectedDates 数组中。

这样，我们就避免了直接将数组绑定到 el-date-picker 组件所产生的错误。

希望这个解决方案对您有帮助。如果您有任何疑问，请随时问我。

【相关推荐】

• 这篇博客: el-date-picker最大跨度一年组件封装中的 1、v-model使用在自定义组件上 部分也许能够解决你的问题。

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^