VueJS - 模型绑定与使用jQuery插件的输入无关 [英] VueJS - model binding not working with inputs using jQuery plugins

问题描述

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

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

输入本身并没有什么特别之处：

 < div class =输入组日期> 
< input id =dob
 v-model =newCamper.dob
 placeholder =MM-DD-YYYY
 class =form-control
 name =dobtype =text> 
< span class =input-group-addon> 
< span class =glyphicon glyphicon-calendar>< / span> 
< / span> 
< / div> 
  

更新
<我也试过这与数字笔刷屏蔽输入插件，相同的结果。看来除了简单的输入输入外，其他任何东西都不会被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; 
}）
}）; 
  

解决方案

UPDATE：Vue.js中的指令发生了相当大的变化2.0 - 解决方案将涉及组件和V模型。这个答案涉及Vue.js< 2.0。

当使用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; 
 $ b $（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 =dobtype =text> 
< span class =input-group-addon> 
< span class =glyphicon glyphicon-calendar>< / span> 
< / span> 
< / div> 
  

I am working on converting a form to utilize VueJS. The form has an input for a date of birth that uses eonasdan/bootstrap-datetimepicker (http://eonasdan.github.io/bootstrap-datetimepicker/).

The problem is that when I change the value of the dob input with DateTimePicker, VueJS does not bind to this. It only works if the user directly types in the input, which is what I'm trying to avoid (to properly format the date).

The input itself is nothing special:

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

UPDATE

I also tried this with digitalbrush Masked Input Plugin, same result. It seems that anything other than just plain typing in an input is not recognized by Vue. However, this works - although it's a bit clunky:

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

解决方案

UPDATE: Directives have changed pretty dramatically in Vue.js 2.0 - the solution there would involve a component and v-model. This answer pertained to Vue.js < 2.0.

Your solution is typical when v-model is used and keystrokes are not involved. In situations like this, in order to make it reusable, I usually write a directive:

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

And use it like this:

<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插件的输入无关的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！