vue js datepicker v-model 在设置新日期时使用先前设置的值更新

Question

在模板中，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>

Answer 1

是的，那是因为 'selected' 事件在设置 v-model 变量的 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

vue js datepicker v-model 在设置新日期时使用先前设置的值更新

vue js datepicker v-model updates with previously set value when setting a new date

javascript

vue.js

vue-component