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

【问题标题】：A simple datepicker in VueJSVueJS 中的一个简单的日期选择器
【发布时间】：2016-11-22 16:42:17
【问题描述】：

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

【问题讨论】：

标签： vue.js vue-component

【解决方案1】：

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

幸运的是，插件provides a change event，所以我们可以在更改事件触发时手动设置视图模型的属性：https://jsfiddle.net/ma9sgnd8/4/

【讨论】：

【解决方案2】：

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

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

（或像https://github.com/charliekassel/vuejs-datepicker这样的外部包）

【讨论】：