VueJS 中的一个简单日期选择器 [英] A simple datepicker in VueJS

问题描述

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

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'
          })
       });
    }
})

推荐答案

原来 vue 是监听 dom 节点的 input 事件，而不是监听 dom 节点的 valuejs 对象(这是合理的，因为在我们 document.querySelector() 之前不会有任何 js 对象).证明:在文档中，它说我们可以使用 .lazy 修饰符用于监听 change 事件而不是 input.所以当基于 jQuery 的 bootstrap 插件改变了 js 中输入的 value 时，vue 不会检测到它.

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.

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

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/

这篇关于VueJS 中的一个简单日期选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！