vuejs-datepicker@selected事件触发时v-model返回上一次旧值问题

问题根因 #

vuejs-datepicker组件的@selected事件触发时机早于v-model绑定值的更新时机，你在事件回调里读取this.endDate时，响应式数据还未完成本次更新，因此拿到的是上一次选择的旧值。

解决方案 #

• 方案1：直接使用@selected事件返回的最新日期
  @selected事件会默认将本次选中的新日期作为参数传递给绑定方法，直接使用该参数即可，无需等待响应式变量更新：
  修改filtersChanged方法接收参数：

filtersChanged(newEndDate) {
  console.log("Filter endDate", newEndDate)
  bus.$emit('filtersChanged', 
  {
     placeFilter: d => d.place === this.selectedPlaceFilter, 
     startDate: d => d.time >= this.startDate, 
     endDate: d => d.time <= newEndDate, 
  })
}

• 方案2：通过$nextTick等待响应式更新完成
  如果必须使用this.endDate变量，可以将逻辑包裹在$nextTick回调中，等Vue完成响应式数据更新后再取值：

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, 
    })
  })
}

• 方案3：监听endDate变化触发逻辑
  移除@selected事件绑定，改为监听endDate变量的变化，变量更新后自动执行后续逻辑：

export default {
  data () {
    return {
        endDate: new Date('December 1, 2022 03:24:00')
      }
  },
  watch: {
    endDate() {
      this.filtersChanged()
    }
  },
  methods: {
    // 原有filtersChanged逻辑无需修改
  },
  components: {
    Datepicker
  }
}

内容的提问来源于stack exchange，提问作者kakakakakakakk