Record the v-model value out of sync problem after el-input uses native JS events to modify the value data

record problem

<el-input v-model="a_item.C_ISBN" size="medium" type="textarea" placeholder="请填写商品ID，以英文分号';'分割" 
@blur="btKeyUp"></el-input>
                      

//限制输入特殊字符
 btKeyUp(e) {
    e.target.value = e.target.value.replace(/[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘'，。、]/g,";");
 },

At this time the problem arises, the value of v-html has not changed

Reason: The input event $emit('input',value) is not triggered when js is modified

---

 Solution:

 e.target.dispatchEvent(new Event('input'))

 How to use:

 btKeyUp(e) {
    e.target.value = e.target.value.replace(/[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘'，。、]/g,";");
    e.target.dispatchEvent(new Event('input'))
 },

---

Expand knowledge points

//自定义事件
const inputEvent=new Event('input')
 window.dipatchEvent(inputEvent) //手动触发
 window.addEventListener('input',funciton(){
 })


 //这种得需要用window对象监听
 dom.dipatchEvent(inputEvent) //手动触发 就这相当vue中$emit('input')
 dom.addEventListener('input',funciton(){
 }) //相当于$on('input') 
 //和以上同理。可以搜索一下自定义事件学习一下就明白了

---

"End"