html – VueJS – 模型绑定不使用jQuery插件的输入

概述我正在努力转换表格以利用VueJS.该表单包含使用eonasdan / bootstrap-datetimepicker( http://eonasdan.github.io/bootstrap-datetimepicker/)的出生日期输入. 问题是,当我使用DateTimePicker更改dob输入的值时,VueJS不会绑定到此.它只有在用户直接输入输入时才有效,这正是我想要避免的(正确格式化 我正在努力转换表格以利用VueJs.该表单包含使用eonasdan / bootstrap-datetimepicker( http://eonasdan.github.io/bootstrap-datetimepicker/)的出生日期输入.

问题是,当我使用DateTimePicker更改dob输入的值时,VueJs不会绑定到此.它只有在用户直接输入输入时才有效,这正是我想要避免的(正确格式化日期).

输入本身并不特别：

<div >    <input ID="dob"         v-model="newCamper.dob"         placeholder="MM-DD-YYYY"                  name="dob" type="text">    <span >      <span ></span>    </span></div>

UPDATE

我也尝试过使用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< 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 >    <input ID="dob"         v-date="newCamper.dob"         placeholder="MM-DD-YYYY"                  name="dob" type="text">        <span >            <span ></span>        </span></div>

总结

以上是内存溢出为你收集整理的html – VueJS – 模型绑定不使用jQuery插件的输入全部内容，希望文章能够帮你解决html – VueJS – 模型绑定不使用jQuery插件的输入所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。