VueJS中的简单日期选择器

Question

我想在组件输入标签中创建一个datetimepicker。我已经实现了bootstrap-datetimpicker，但是当我选择日期时，我无法在组件方法中获得输入值（这是一个示例：https : //jsfiddle.net/ma9sgnd8/1/

new Vue({
    el: '#app',
  data: {
    date: ''
  },
  mounted: function() {

       var args = {

            format: 'MM/DD/YYYY'
       };
        this.$nextTick(function() {
            $('.datepicker').datetimepicker(args)
        });

       this.$nextTick(function() {
          $('.time-picker').datetimepicker({
            format: 'LT'
          })
       });
    }
})

Answer 1

事实证明，vue侦听inputdom节点的事件，而不是监视valuejs对象的事件（这是合理的，因为直到我们document.querySelector()左右才有任何js对象）。证明：在文档中，它表示可以使用.lazy修饰符来监听change事件input。因此，当基于jQuery的bootstrap插件更改valuejs中的输入时，vue不会检测到它。

幸运的是，该插件提供了change事件，因此，当change事件触发时，我们可以手动设置视图模型的属性：https : //jsfiddle.net/ma9sgnd8/4/