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就是一个语法糖

      

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

 这两句的是一样的。

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