Html VueJS-模型绑定无法使用jQuery插件处理输入

我正在将表单转换为利用VueJS。表单有一个使用eonasdan/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>

---

更新：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>

---

我也不得不用我的日期选择器做同样的事情。有一个类似这样的

set

方法：

vm.$set（keypath，value）

。它的功能与vm.$data.keypath=value相同，只是稍微干净了一点。详情如下：

<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>