jquery - Vue 2 日期选择器组件

Question

我正在尝试使用 Bootstrap Datepicker 创建 Vue 2 组件，但在选择日期后尝试更新输入时卡住了，这是我的代码:

Vue.component('datepicker', {
template: '\
  <input class="form-control datepicker"\
        ref="input"\
        v-bind:value="value"\
        v-on:input="updateValue($event.target.value)"\
        v-on:blur="updateValue($event.target.value)"\
        v-on:focus="updateValue($event.target.value)"\
        data-date-format="dd-mm-yyyy"\
        data-date-end-date="0d"\
        placeholder="dd-mm-yyyy"\
       type="text"  />\
',
props: {
    value: {
      type: String,
      default: moment().format('DD-MM-YYYY')
    }
},
mounted: function () {

},
methods: {
    updateValue: function (value) {
        this.$emit('input', value);
    },
}
});

如果通过键盘输入但在日历中选择时则不会更新值。我有什么想法可以通过日历在日期更改时更新值吗？

** 更新**

我已经得到了以下代码:

mounted: function() {
    let self = this;
    this.$nextTick(function() {
        $('.datepicker').datepicker({
            startView: 1,
            todayHighlight: true,
            todayBtn: "linked",
            autoclose: true,
            format: "dd-mm-yyyy"
        })
        .on('changeDate', function(e) {
            var date = e.format('dd-mm-yyyy');
            self.updateValue(date);
        });
    });
}

但它现在更新页面上所有 Datepicker 实例的值。我如何设置它以便仅针对选定的日期选择器进行更新？

Answer 1

这是最终的工作组件:

Vue.component('datepicker', {
template: '\
  <input class="form-control datepicker"\
        ref="input"\
        v-bind:value="value"\
        v-on:input="updateValue($event.target.value)"\
        data-date-format="dd-mm-yyyy"\
        data-date-end-date="0d"\
        placeholder="dd-mm-yyyy"\
        type="text"  />\
',
props: {
    value: {
      type: String,
      default: moment().format('DD-MM-YYYY')
    }
},
mounted: function() {
    let self = this;
    this.$nextTick(function() {
        $(this.$el).datepicker({
            startView: 1,
            todayHighlight: true,
            todayBtn: "linked",
            autoclose: true,
            format: "dd-mm-yyyy"
        })
        .on('changeDate', function(e) {
            var date = e.format('dd-mm-yyyy');
            self.updateValue(date);
        });
    });
},
methods: {
    updateValue: function (value) {
        this.$emit('input', value);
    },
}
});