如何解决为什么 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,您不必在输入处理程序中显式设置值,如果您愿意,可以在处理程序中执行任何其他操作。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。