为什么 datepicker 返回 null？

Question

我有两个文本框 start_date 和 end_date。我的问题是，当我单击 search button 时，它给出了 null 值。我想提醒并显示文本框内的值。我认为问题是在我单击切换按钮时开始的。我在 Vuejs 中使用 jquery。有人可以帮我解决我的问题吗？这是我的 jsFiddle -> https://jsfiddle.net/vL4z071a/

toggleView : function() {
    if(this.first_view == true) {
      this.first_view = false;
      this.second_view = true;
    }
    else {
      this.second_view = false;
      this.first_view = true;
    }
    var args = {
      format: 'YYYY-MM-DD'
    };
    this.$nextTick(function() {
      $('.datepicker').datetimepicker(args)
      $('.datepicker2').datetimepicker(args)
    });

    this.$nextTick(function() {
      $('.time-picker').datetimepicker({
        format: 'LT'
      })
    }); 
},
displayDate : function() {
    alert(this.start_date);
    alert(this.end_date);
}

Answer 1

当您显示 second-view 时，您的日期选择器不存在。我检查了选择器是否存在，它们返回的长度为 0。因此，在日历中选择日期时，Vue 没有设置 start/end 日期。我在文档本身上创建了一个侦听器来侦听 dp.change 并相应地更新日历。

JsFiddle

$(document).on('dp.change', function(event) {
  if (event.date) {
    var date = event.date.format('YYYY-MM-DD');
    (event.target.className.indexOf('datepicker2') > -1) ? Vue.set(vm, 'end_date', date): Vue.set(vm, 'start_date', date);
  }
});

为什么 datepicker 返回 null？

Why datepicker returning null?

jquery

bootstrap-datepicker

vue.js