vue自定义指令+只能输入数字和英文+修改v-model绑定的值

//环境：vue+iview

//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="hhhFFF"></Input>

  <Input  :value="hhhFFF" @input="hhhFFF=$event.target.value"></Input>

 这两句的是一样的。

 所以想要真正改变data里面定义的变量hhhFFF，就需要手动触发input事件，才可以执行这句hhhFFF=$event.target.value才能真正的达到效果