VueJS 中的一个简单的日期选择器

Question

我想在组件输入标签中创建一个日期时间选择器。我已经实现了 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

问题出在您的日期选择器中，如果您查看控制台，它会崩溃并可能出现问题。没有正确更新状态，试试默认的：

<div id="app">
  <div>
  <input type="date" v-model="date">
  </div>
  {{date}}
</div>

（或外部包如 https://github.com/charliekassel/vuejs-datepicker）

Answer 2

原来vue监听的是dom节点的input事件，而不是监听js对象的value事件（这是合理的，因为不会有任何js 对象直到我们 document.querySelector() 左右）。证明：in the doc，它说我们可以使用 .lazy 修饰符来 监听 change 事件而不是 input。所以当基于jQuery的bootstrap插件在js中改变input的value时，vue不会检测到。

幸运的是，插件 provides a change event, so we can manually set the view-model's property when the change event fires: https://jsfiddle.net/ma9sgnd8/4/

VueJS 中的一个简单的日期选择器

A simple datepicker in VueJS

vue.js

vue-component