Question

我正在使用带有掩模库的电话输入的v-model表单

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.maskedinput/1.4.1/jquery.maskedinput.min.js" type="text/javascript"></script> 
<input type="text" v-model="phone" placeholder="телефон" class="form-control" id="phone">

当vue创建了使用mask

设置的所有字段时

created: function () {
    var options =  {
        onComplete: function(e) {
            var event = document.createEvent('HTMLEvents');
            event.initEvent('input', true, true);
            e.currentTarget.dispatchEvent(event);
            $("#phone").trigger('change');
        }
    };
    jQuery(function($){
        $("#phone").mask("+7 (999) 999-9999", options);
    });

我知道jquery和vue有不同的事件处理方式，所以我在onComplete事件处理选项中生成了一个触发HTML事件的事件。它不起作用，出了什么问题？

Answer 1

正如@EricGuan所提到的那样，您的脚本无法在created lifecycle hook中运行，因为组件在created挂钩被触发之前不知道该模板。

相反，请使用mounted生命周期挂钩：

mounted: function() {
  // your code here
}

Working codepen.

V-Model不与掩码jquery绑定

1 个答案: