BUG1: vue中使用@keyup.enter(@keyup.enter.native)事件,和click事件綁定同一個函數,但是結果卻不一樣


問題:下圖中@keyup.enter事件和click事件綁定了同一個方法,但是觸發兩個方法后最后的結果卻不一樣;

click觸發綁定事件能正常運行,但是@keyup.enter觸發綁定事件就是莫名其妙的結果很奇怪,明明調用的都是同一個函數

經過多次檢查輸出,發現在觸發keyup.enter事件的時候,執行到了我自定義的一個刪除函數;what???八竿子打不到邊的函數為什么會被執行,為什么會執行這個刪除函數,為什么不執行我的修改函數?

帶着滿臉問號,我去看了我這個函數的調用的地方,就是下面的代碼調用的,沒毛病,就一個普通的button調用的

然后結合了各路神仙的經驗發現,就是@keyup.enter的問題:

1. @keyup.enter的觸發會觸發form表單的提交,觸發當前form表單中button按鈕上的事件

測試發現:

1. 當前form表單里面有多個button,只會自動觸發第一個button

2. 對form外面的button沒有影響

解決:

1. 給button標簽加上type=‘button’

2.使用elment ui的button組件 ‘el-button’

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM