文章/答案/技术大牛

发布

社区首页 >问答首页 >VueJS中的一个简单的日期选择器

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

Stack Overflow用户

提问于 2016-11-23 00:42:17

回答 2查看 22.9K关注 0票数 2

我想在组件输入标记中创建一个datetimepicker。我已经实现了bootstrap-datetimpicker，但是当我选择date时，我无法在组件方法中获得输入值(例如：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

回答 2

Stack Overflow用户

回答已采纳

发布于 2016-11-23 20:26:52

结果是vue监听dom节点的input事件，而不是监视js对象的value (这是合理的，因为在我们使用document.querySelector()之前不会有任何js对象)。证据：in the doc，它说我们可以使用.lazy修饰符来监听change事件，而不是input。因此，当基于jQuery的引导程序插件在js中更改输入的value时，vue不会检测到它。

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

票数 5

Stack Overflow用户

发布于 2016-11-23 01:06:21

问题出在你的datepicker中，如果你在控制台中查看，它会崩溃并探测到。未正确更新状态，请尝试默认状态：

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

(或者像https://github.com/charliekassel/vuejs-datepicker这样的外部包)

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/40747234

复制

相似问题

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

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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