vue js datepicker v-model在设置新日期时使用先前设置的值进行更新
vue js datepicker v-model在设置新日期时使用先前设置的值进行更新
提问于 2021-11-08 15:01:26
在模板中，endDate会按预期更新。但是当使用@selected属性调用filtersChangerd方法时，更新后的值不是新值，而是以前设置的值。
<template>
<div>
<datepicker placeholder="Select end date" v-model="endDate" @selected="filtersChanged"/>
<p>endDate Filter: {{ endDate }}</p>
</div>
</template>
<script>
import {bus} from "./../../main"
import Datepicker from 'vuejs-datepicker';
export default {
data () {
return {
endDate: new Date('December 1, 2022 03:24:00')
}
},
methods: {
filtersChanged() {
console.log("Filter endDate", this.endDate)
bus.$emit('filtersChanged',
{
placeFilter: d => d.place === this.selectedPlaceFilter,
startDate: d => d.time >= this.startDate,
endDate: d => d.time <= this.endDate,
})
},
calculateStartDate() {
var myDate = new Date();
var newDate = new Date(myDate.getTime() - (60*60*24*7*1000));
return newDate
}
},
components: {
Datepicker
}
}
</script>回答 1
Stack Overflow用户
回答已采纳
发布于 2021-11-08 16:48:22
是的，这是因为'selected‘事件在设置v-nextTick变量的Vue 'nextTick’函数之前触发。所以在你的函数中手动调用它。
filtersChanged() {
this.$nextTick(() => {
console.log("Filter endDate", this.endDate)
bus.$emit('filtersChanged',
{
placeFilter: d => d.place === this.selectedPlaceFilter,
startDate: d => d.time >= this.startDate,
endDate: d => d.time <= this.endDate,
});
}
}参考文献
https://codesandbox.io/s/vuejs-datepicker-selected-event-v9ikz?file=/components/Demo.vue:611-628
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69885618
复制相关文章
相似问题
腾讯云开发者
