为什么 Element UI datepicker 组件在我再次单击之前不更新其值？

问题描述

我正在使用 el-datepicker 组件根据日期过滤 el-table 上的项目列表。当我选择一个新的日期范围时，过滤器可以正常工作，但直到我再次单击它，datepicker 元素才会更新为我选择的新日期。以前有人遇到过这个问题吗？

<el-date-picker
    size="mini"
    :value="filters.start_date"
    @input="updatefilters({ value: $item,prop: 'start_date' })"
    value-format="yyyy-MM-dd"
    format="MMMM dd,yyyy"
    type="daterange"
    align="right"
/>

然后在我的组件的方法中：

updatefilters(data) {
    this.$store.commit('panel/changeFilters',data)
    ...
}

因此日期选择器从 filters.start_date 获取其值。问题是，如果我执行 console.log(this.filters.start_date)，它会显示正确的日期范围（我刚刚选择的日期范围）。但是，直到我再次单击，日期选择器才会显示该日期范围。

解决方法

问题在于您正在绑定值，即使用 :value 而不是 v-model。因此，如果您绑定值，您必须自己将值分配给数据，这样它会导致反应性并因此更新 DOM。

如果我按照您的方法使用绑定值，我想更改我的代码，如下所示：

<el-date-picker
    size="mini"
    :value="filters.date_range"
    @input="updateFilters"
    value-format="yyyy-MM-dd"
    format="MMMM dd,yyyy"
    type="daterange"
    align="right"
/>

请注意，我已将 filters.start_date 更改为 filters_date_range，因为 type=daterange 的值采用包含两个项目的数组。就像是 [startDate,endDate]

您应该注意的另一件事是我从 updateFilters 中删除了参数，因为我想在它被选中时收到最新的日期范围。

现在在我的处理函数中我只需要做：

updateFilters(data) {
    this.$store.commit('panel/changeFilters',data)
    this.filters.date_range = data

    //data : [startDate,endDate]
}

并且，一旦您更改选择器值，它就会更新 DOM。

另一种更简单的方法是使用 v-model 而不是 :value。

<el-date-picker
    size="mini"
    v-model="filters.date_range"
    @input="updateFilters"
    value-format="yyyy-MM-dd"
    format="MMMM dd,yyyy"
    type="daterange"
    align="right"
/>

它会自动更新 DOM，您不必在输入处理程序中显式设置值，如果您愿意，可以在处理程序中执行任何其他操作。