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才能真正的達到效果