V-Model 不与面具 jquery 绑定答案

【问题标题】：V-Model not binding with the mask jqueryV-Model 不与面具 jquery 绑定
【发布时间】：2017-05-22 18:13:32
【问题描述】：

我正在使用带有 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创建了所有用掩码设置的字段时

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 事件的选项。没用，怎么回事？

【问题讨论】：

再看一个vue实例的生命周期事件，你会发现你用错了

标签： vue.js mask

【解决方案1】：

正如@EricGuan 所暗示的，您的脚本将无法在created lifecycle hook 中运行，因为组件在created 钩子触发之后才知道模板。

改为使用mounted 生命周期挂钩：

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

Working codepen.

【讨论】：