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

Question

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

问题是，当我使用 DateTimePicker 更改 dob 输入的值时，VueJS 不会绑定到此。它仅在用户直接输入输入时有效，这是我试图避免的（正确格式化日期）。

输入本身没什么特别的：

<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.js 无法识别除了输入中的简单输入以外的任何内容。然而，这有效 - 虽然它有点笨拙：

$(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;
    })
});

Answer 1

更新：指令在 Vue.js 2.0 中发生了相当大的变化 - 那里的解决方案将涉及组件和 v 模型。此答案适用于 Vue.js < 2.0.

当使用 v-model 并且不涉及击键时，您的解决方案是典型的。在这种情况下，为了使其可重用，我通常会写一个指令：

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>

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

VueJS - model binding not working with inputs using jQuery plugins

html

bootstrap-datetimepicker

vue.js