vue?el-input輸入框輸入不了的解決方法
一、問題
1.今天寫代碼遇到了一個很奇葩的問題:寫了很多個輸入框,其他輸入框都沒有問題,就最后一個單獨處理的有問題,輸入框里面輸入不了東西。著實不明白為什么,一遍又一遍抱怨,重復輸入,里面還是除了原有的值什么都輸不了。
除了原有的3,什么都輸不了
二、解決方法
1.用vue dev-tools審查了才發(fā)現(xiàn)這個輸入框無論輸入什么,value值都是不變化,盡管 也觸發(fā)了input事件(和html沒有關系)
html的邏輯也完全相同,定義的對象的value和v-model綁定
<!-- 輸入框 --> <template v-if="item.type === 'input'"> <el-input class="col" :id="key" v-model="item.value" :clearable="item.inputClearable" @input="handleInput($event, item)" ></el-input> </template>
輸入了,但是 value不變
輸入后,value實時變化
2.仔細比較兩個地方有什么不同,好像也沒有什么區(qū)別,如圖2-1所示。
終于突發(fā)奇想,看到了下面沒有reactive,可能是響應性丟失(根本原因)了。
圖2-1 兩段聲明,也沒有特殊邏輯
3.于是在下面的聲明上也加上了reactive,竟然好了,可以輸入了?。?!
三、總結
1.天哪,我也是沒有料到竟然是因為響應式丟失,導致無法輸入的(value無法更新);世界很大,無奇不有,掉進坑里很迷茫。
2.遇到輸入框無法輸入可以:
1)先檢查html,查看input輸入事件是否觸發(fā);觸發(fā)了,則html是正確的
2)檢查v-model綁定的值:必須是響應式的(在data選項中定義的,或是setup函數(shù)中用reactive或ref顯示聲明為響應式數(shù)據(jù))
到此這篇關于vue el-input輸入框輸入不了解決的文章就介紹到這了,更多相關vue el-input輸入框輸入不了內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
vue3使用拖拽組件draggable.next的保姆級教程
做項目的時候遇到了一個需求,拖拽按鈕到指定位置,添加一個輸入框,這篇文章主要給大家介紹了關于vue3使用拖拽組件draggable.next的保姆級教程,需要的朋友可以參考下2023-06-06vue實現(xiàn)的上拉加載更多數(shù)據(jù)/分頁功能示例
這篇文章主要介紹了vue實現(xiàn)的上拉加載更多數(shù)據(jù)/分頁功能,涉及基于vue的事件響應、數(shù)據(jù)交互等相關操作技巧,需要的朋友可以參考下2019-05-05Vue出現(xiàn)did you register the component 
這篇文章主要介紹了Vue出現(xiàn)did you register the component correctly?解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03vue組件傳值(高級)、屬性傳值、反向傳值、跨級傳值實例詳解
父組件通過屬性傳值給子組件,父組件修改數(shù)據(jù)后會刷新頁面并重新傳值給子組件,子組件可以修改父組件傳的值并刷新自己的頁面?但是并不會修改父組件中的值,這篇文章主要介紹了vue組件傳值(高級)、屬性傳值、反向傳值、跨級傳值,需要的朋友可以參考下2022-09-09使用elementUI table展開行內嵌套table問題
這篇文章主要介紹了使用elementUI table展開行內嵌套table問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-04-04