html - VueJS-模型绑定(bind)不适用于使用jQuery插件的输入

我正在转换表格以利用VueJS。该表单具有使用eonasdan / bootstrap-datetimepicker(http://eonasdan.github.io/bootstrap-datetimepicker/)的出生日期输入。

问题是，当我使用DateTimePicker更改dob输入的值时，VueJS不会与此绑定(bind)。仅当用户直接输入输入时才起作用，这是我要避免的事情(正确格式化日期)。

输入本身没有什么特别的:

<div class="input-group date">
    <input id="dob"
        v-model="newCamper.dob"
        placeholder="MM-DD-YYYY"
        class="form-control"
        name="dob" type="text">
    <span class="input-group-addon">
      <span class="glyphicon glyphicon-calendar"></span>
    </span>
</div>

更新

我也使用digitalbrush的Masked Input Plugin进行了尝试，结果相同。似乎除了输入中的普通输入外，Vue无法识别任何其他内容。但是，这很有效-尽管有点笨拙:

$(document).ready(function () {
    var dob = $("#dob");
    dob.mask("99/99/9999",{placeholder:"MM/DD/YYYY"});
    dob.change(function()
       var value = $(this).val();
       vm.$data.newCamper.dob = value;
    })
});

最佳答案

更新:指令在Vue.js 2.0中已发生了巨大变化-解决方案将涉及组件和v模型。此答案与Vue.js
当使用v模型并且不涉及击键时，您的解决方案很典型。在这种情况下，为了使其可重用，我通常编写一条指令:

Vue.directive("date", {
    "twoWay": true,
    "bind": function () {
        var self = this;

        self.mask = "99/99/9999";
        $(self.el).mask(self.mask, { placeholder:"MM/DD/YYYY" });
        $(self.el).change(function() {
            var value = $(this).val();
            self.set(value);
        });
    },
    "unbind": function () {
        var self = this;

        $(self.el).unmask(self.mask);
    }
});

并像这样使用它:

<div class="input-group date">
    <input id="dob"
        v-date="newCamper.dob"
        placeholder="MM-DD-YYYY"
        class="form-control"
        name="dob" type="text">
        <span class="input-group-addon">
            <span class="glyphicon glyphicon-calendar"></span>
        </span>
</div>