vuejs2 - 带有日期选择器输入的 V 模型

Question

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

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

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

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

Answer 1

如果您混合使用 jQuery 和 Vue(只是从代码片段中猜测)，那么您就是在混淆您的上下文。一种(多种)修复方法:

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