背景：
我在循環里面的input框需要限制輸入的值的類型，如果我綁定了change的方法的話 首先需要失去焦點才能生效，如果不失去焦點直接點擊確定按鈕是不能觸發事件的 值還是原來的 ，第二個如果層級多的話需要把索引什么的傳過去用$set修改，終究是不方便所以在了input框的原生onkeyup事件中
但是問題來了 onkeyup事件中的值并沒有跟vue的數據進行綁定
在0后面輸入了2變成了02
onkeyup事件中的邏輯處理成了2
但是當點擊提交的時候發現值還是02
解決辦法
onkeyup
="if(this.value.length==1){this.value=this.value.replace(/[^0-9]/g,'')}else{this.value=parseInt(this.value.replace(/\D/g,''))};this.dispatchEvent(new Event('input'))"onafterpaste
="if(this.value.length==1){this.value=this.value.replace(/[^0-9]/g,'')}else{this.value=parseInt(this.value.replace(/\D/g,''))};this.dispatchEvent(new Event('input'))"
終于解決了 提交的時候vue中的值也變成了2
接下來我們探究一下element.dispatchEvent()
一、element.dispatchEvent()
對于標準瀏覽器，其提供了可供元素觸發自定義事件的方法：element.dispatchEvent().。
不過，在使用該方法之前，我們還需要做其他兩件事，即創建和初始化。
```bash
document
.createEvent()
event
.initEvent()
element
.dispatchEvent()
舉個例子：var dom
= document
.querySelector('#id')
dom
.addEventListener('alert', function
(event
) {console
.log(event
)
}, false);
var evt
= document
.createEvent("HTMLEvents");
evt
.initEvent("alert", false, false);
// 觸發, 即彈出文字
dom.dispatchEvent(evt);
1、createEvent()
createEvent()方法返回新創建的Event對象，支持一個參數，表示事件類型，具體見下表：參數 事件接口 初始化方法
HTMLEvents HTMLEvent initEvent()
MouseEvents MouseEvent initMouseEvent()
UIEvents UIEvent initUIEvent()
2、initEvent()
initEvent()方法用于初始化通過DocumentEvent接口創建的Event的值。支持三個參數：initEvent(eventName, canBubble, preventDefault)
分別表示：事件名稱
是否可以冒泡
是否阻止事件的默認操作
3、dispatchEvent()
dispatchEvent()就是觸發執行了，dom.dispatchEvent(eventObject)
參數eventObject表示事件對象，是createEvent()方法返回的創建的Event對象。二、自定義事件
1、Event
自定義事件的函數有 Event、CustomEvent 和 dispatchEvent```bash
// 向 window派發一個resize內置事件
window.dispatchEvent(new Event('resize'))// 直接自定義事件，使用 Event 構造函數：
var event = new Event('build');
var elem = document.querySelector('#id')
// 監聽事件
elem.addEventListener('build', function (e) { ... }, false);
// 觸發事件.
elem.dispatchEvent(event);
2、CustomEvent
CustomEvent 可以創建一個更高度自定義事件，還可以附帶一些數據，具體用法如下：
var myEvent
= new CustomEvent
(eventname, options
);
其中 options 可以是：
{detail:
{...
},bubbles: true, //是否冒泡cancelable:
false //是否取消默認事件
}
其中 detail 可以存放一些初始化的信息，可以在觸發的時候調用。其他屬性就是定義該事件是否具有冒泡等等功能。
內置的事件會由瀏覽器根據某些操作進行觸發，自定義的事件就需要人工觸發。
dispatchEvent 函數就是用來觸發某個事件：
element.dispatchEvent(customEvent);
上面代碼表示，在 element 上面觸發 customEvent 這個事件。
結合起來用就是：
// add an appropriate event listener
obj.addEventListener
("cat", function
(e
) { process
(e.detail
) });// create and dispatch the event
var event
= new CustomEvent
("cat",
{"detail":
{"hazcheeseburger":true
}});
obj.dispatchEvent
(event
);
使用自定義事件需要注意兼容性問題，而使用 jQuery 就簡單多了：// 綁定自定義事件
$(element).on
('myCustomEvent', function
(){});// 觸發事件
$(element).trigger
('myCustomEvent');
// 此外，你還可以在觸發自定義事件時傳遞更多參數信息：
$( "p" ).on
( "myCustomEvent", function
( event, myName
) {$( this ).text
( myName +
", hi there!" );
});
$( "button" ).click
(function
() {$( "p" ).trigger
( "myCustomEvent",
[ "John" ] );
});
3、IE瀏覽器
由于向下很多版本的瀏覽器都不支持document.createEvent()方法，因此我們需要另辟蹊徑（據說IE有document.createEventObject()和event.fireEvent()方法，但是不支持自定義事件~~）。
IE瀏覽器有不少自給自足的東西，例如下面要說的這個"propertychange"事件，顧名思意，就是屬性改變即觸發的事件。
例如文本框value值改變，或是元素id改變，或是綁定的事件改變等等。
dom.evtAlert
= "2012-04-01";
<br
>dom.attachEvent
("onpropertychange", function
(e
) {if (e.propertyName
== "evtAlert") {fn.call
(this
);}
});
這個，當我們需要觸發自定義事件的時候，只要修改DOM上自定義的evtAlert屬性的值即可：
dom.evtAlert = Math.random().toString(36).substr(2)
此時就會觸發dom上綁定的onpropertychange事件，又因為修改的屬性名正好是"evtAlert", 于是自定義的fn就會被執行。這就是IE瀏覽器下事件觸發實現的完整機制，應該說講得還是蠻細的。
三、自定義事件的刪除
與觸發事件不同，事件刪除，各個瀏覽器都提供了對應的事件刪除方法，如removeEventListener和detachEvent。
不過呢，對于IE瀏覽器，還要多刪除一個事件，就是為了實現觸發功能額外增加的onpropertychange事件：
dom.detachEvent
("onpropertychange", evt
);var fireEvent
= function
(element,event
){ if (document.createEventObject
){ // IE瀏覽器支持fireEvent方法 var evt
= document.createEventObject
(); return element.fireEvent
('on'+event,evt
) } else
{ // 其他標準瀏覽器使用dispatchEvent方法 var evt
= document.createEvent
( 'HTMLEvents' ); evt.initEvent
(event, true, true
); return !element.dispatchEvent
(evt
); }
};
參考
https://www.zhangxinxu.com/wordpress/2012/04/js-dom%E8%87%AA%E5%AE%9A%E4%B9%89%E4%BA%8B%E4%BB%B6/
總結
以上是生活随笔為你收集整理的动态改变Input和Textarea值Vue数据没有绑定的解决办法的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
