带有日期选择器输入的 V 模型 [英] V-model with datepicker input

问题描述

尝试构建一个与 daepicker 配合使用的组件，并使用 v-model 绑定输入值.但是输入事件似乎没有触发，我似乎无法弄清楚原因.这是我的组件:

<datepicker v-model="date"></datepicker>
Vue.component('datepicker', {模板:'<input type="text" class="form-control pull-right" placeholder="dd/mm/aaaa" autocomplete="off">',安装:功能(){$(this.$el).datepicker({自动关闭:真，startView: '年',}).on('changeDate', function(e) {this.$emit('input', e.format('dd/mm/yyyy'));});},销毁:函数(){$(this.$el).datepicker('destroy');}});var app = new Vue({el: '#app',数据: {日期:'2018-03-01'}})

另外，控制台出现如下错误:

未捕获的类型错误:this.$emit 不是函数

解决方案

如果您混合使用 jQuery 和 Vue(只是从代码片段中猜测)，您就会混淆您的上下文.修复方法之一:

 挂载:function() {const self = this;$(this.$el).datepicker({自动关闭:真，startView: '年',}).on('changeDate', function(e) {self.$emit('input', e.format('dd/mm/yyyy'));});},

Trying to build a component that works with daepicker and using v-model to bind the input value. But the input event does not appear to be firing and I can’t seem to figure out why. Here’s my component:

<div id="app">
    <datepicker v-model="date"></datepicker>
</div>

Vue.component('datepicker', {
        template: '<input type="text" class="form-control pull-right" placeholder="dd/mm/aaaa" autocomplete="off">',
        mounted: function() {
            $(this.$el).datepicker({
                autoclose: true,
                startView: 'years',
            }).on('changeDate', function(e) {
                this.$emit('input', e.format('dd/mm/yyyy'));
            });
        },
        destroyed: function () {
            $(this.$el).datepicker('destroy');
        }
    });

var app = new Vue({
    el: '#app',
    data: {
        date: '2018-03-01'
    }
})

In addition, the following error appears in the console:

Uncaught TypeError: this.$emit is not a function

解决方案

If you're mixing jQuery and Vue (just a guess from the code fragment), you're mixing up your contexts. One (of many) ways to fix:

   mounted: function() {
        const self = this;
        $(this.$el).datepicker({
            autoclose: true,
            startView: 'years',
        }).on('changeDate', function(e) {
            self.$emit('input', e.format('dd/mm/yyyy'));
        });
    },

这篇关于带有日期选择器输入的 V 模型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！