时间戳

首页 > 解决方案 > vuejs datepicker selected 事件无法正常工作

vue.js - vuejs datepicker selected 事件无法正常工作

问题描述

我是 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 () {
   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)
            })

    }

标签： vue.js

解决方案

当我输入第一个日期时，它打印为空。当我第二次输入日期时，它打印了第一次输入的时间

是的，因为在nextTick更新v-model.

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

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

推荐阅读