vue自定义指令+修改v-model绑定的值

//环境：vue+iview<br><br>//Alphabet.js
 
import Vue from 'vue';
Vue.directive('Alphabet', { //自定义指令
  inserted: function(e) {
    const el = e.querySelector('.ivu-input'); //获取控件
    el.addEventListener("input", function(e) {
      //进行验证
      checkedfun(el);
    });
    el.addEventListener("input", function(e) {
        //进行验证
        checkedfun(el);
      });
    function checkedfun(el) {
      let reg = new RegExp("^[A-Za-z0-9]*$");
      if (!reg.test(el.value)) {
        el.value = el.value.replace(/[^A-Za-z0-9]+/g, "");
        el.dispatchEvent(new Event("input"));//调用input事件使vue v-model绑定更新
      }
    }
  }
 
});

如果没有写这句el.dispatchEvent(new Event("input")); 输入框是有值，但是data定义的变量是没有变化的。

为什么 el.dispatchEvent(new Event("input")) 可以改变呢？

原因是因为v-model就是一个语法糖

<Input v-Alphabet v-model="testValue"></Input><em id="__mceDel"> 
 <Input :value="testValue" @input="testValue=$event.target.value"></Input>

这两句的是一样的。

所以想要真正改变data里面定义的变量，就需要手动触发input事件，才能真正的达到效果

__EOF__

本文作者：tiantangzhiping
本文链接：https://www.cnblogs.com/tiantangzhiping/p/16624083.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！