vue.js - vuejs datepicker 选定的事件无法正常工作

Question

我是 vuejs-datepicker 。我正在尝试打印存储在数据变量中的选定日期。最初变量的值为空。 vuejs-datepicker 支持选择事件。所以当事件触发时，我的意思是如果选择了日期，所选事件就会被触发。但不打印当前选定的日期，而是打印空字符串。如果我再次选择另一个日期，它会打印上一个日期。它正在打印先前存储的日期。代码如下

使用

 <date-picker :bootstrap-styling="true" class="datepicker form-control" 
 placeholder="Select Date" v-model="appointment.appointmet_date" 
 @selected="dateSelected()"></date-picker>

dateSelected 方法

dateSelected () {
   console.log(this.appointment.appointmet_date)         
},

数据属性

data () {
    return {
        appointment: {
            appointmet_date: '',
        }
    }
}

当我输入第一个日期时，它打印出 null。当我第二次输入日期时，它打印出第一次输入的时间

更新

  dateSelected () {
      // console.log(this.appointment.appointmet_date)
      var self = this
      this.$nextTick(() => console.log(self.appointment.appointmet_date))
      this.$http.post(apiDomain + 'api/getAvailableDate', {avlDate: self.appointment.appointmet_date})
            .then(response => {
                console.log(response)
            })

    }

Answer 1

when i entered first date it printed null. when i entered date second time it printed the time entered first time

是的，因为所选事件在 Vue nextTick 之前触发更新 v-model 的函数。

请在下面的代码和工作codesandbox演示。

dateSelected (e) {
  console.log(this.appointment.appointmet_date);
  this.$nextTick(() => console.log(this.appointment.appointmet_date))
},