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

I want to make a datetimepicker in a components input tag. I have implemented bootstrap-datetimpicker but when i choose date i cant get input value in the components methods( here is an example: 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'
          })
       });
    }
})

解决方案

Turns out vue listens to the input event of the dom node rather than monitoring the value of the js object (which is reasonable, because there won't be any js object until we document.querySelector() or so). Proof: in the doc, it says we can use a .lazy modifier to listen to change events instead of input. So when the jQuery-based bootstrap plugin changes the input's value in js, vue won't detect it.

Luckily, the plugin provides a change event, so we can manually set the view-model's property when the change event fires: https://jsfiddle.net/ma9sgnd8/4/