Question

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

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

此外，控制台中还会出现以下错误：

未捕获的TypeError：this。$ emit不是函数

Answer 1

我在jacky's answer上失败了，但是由于https://github.com/Xelia，问题得以解决（即使在Vue 1.0中，使用ready生命周期而不是mounted）

在日期选择器changeDate事件侦听器中手动更新vue数据，如下所示

var app = new Vue({
  el: '#app',
  data: {
    startDate: '',
  },
  mounted() {
    $("#startDate").datepicker().on(
      "changeDate", () => {this.startDate = $('#startDate').val()}
    );
  },
})

https://jsfiddle.net/3a2055ub/

顺便说一句，如果您正在使用ES5功能而不是ES6粗箭头功能来处理旧公司项目。需要将{v1实例} this绑定到函数中。例如：

mounted() {
  var self = this; // the vue instance
  $("#startDate").datepicker().on(
    "changeDate", function() {self.startDate = $('#startDate').val()}
  );
},

当然，还有其他方法可以实现这一目标，如this blog written by Jason Arnold 所示。

参考：https://github.com/vuejs/vue/issues/4231

可能的相关问题：v-model not working with bootstrap datepicker

Answer 2

如果您要混合使用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'));
        });
    },

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

2 个答案: