vue?el-input輸入框輸入不了的解決方法
一、問(wèn)題
1.今天寫(xiě)代碼遇到了一個(gè)很奇葩的問(wèn)題:寫(xiě)了很多個(gè)輸入框,其他輸入框都沒(méi)有問(wèn)題,就最后一個(gè)單獨(dú)處理的有問(wèn)題,輸入框里面輸入不了東西。著實(shí)不明白為什么,一遍又一遍抱怨,重復(fù)輸入,里面還是除了原有的值什么都輸不了。
除了原有的3,什么都輸不了
二、解決方法
1.用vue dev-tools審查了才發(fā)現(xiàn)這個(gè)輸入框無(wú)論輸入什么,value值都是不變化,盡管 也觸發(fā)了input事件(和html沒(méi)有關(guān)系)
html的邏輯也完全相同,定義的對(duì)象的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實(shí)時(shí)變化
2.仔細(xì)比較兩個(gè)地方有什么不同,好像也沒(méi)有什么區(qū)別,如圖2-1所示。
終于突發(fā)奇想,看到了下面沒(méi)有reactive,可能是響應(yīng)性丟失(根本原因)了。
圖2-1 兩段聲明,也沒(méi)有特殊邏輯
3.于是在下面的聲明上也加上了reactive,竟然好了,可以輸入了?。?!
三、總結(jié)
1.天哪,我也是沒(méi)有料到竟然是因?yàn)轫憫?yīng)式丟失,導(dǎo)致無(wú)法輸入的(value無(wú)法更新);世界很大,無(wú)奇不有,掉進(jìn)坑里很迷茫。
2.遇到輸入框無(wú)法輸入可以:
1)先檢查html,查看input輸入事件是否觸發(fā);觸發(fā)了,則html是正確的
2)檢查v-model綁定的值:必須是響應(yīng)式的(在data選項(xiàng)中定義的,或是setup函數(shù)中用reactive或ref顯示聲明為響應(yīng)式數(shù)據(jù))
到此這篇關(guān)于vue el-input輸入框輸入不了解決的文章就介紹到這了,更多相關(guān)vue el-input輸入框輸入不了內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue+canvas實(shí)現(xiàn)移動(dòng)端手寫(xiě)簽名
這篇文章主要為大家詳細(xì)介紹了vue+canvas實(shí)現(xiàn)移動(dòng)端手寫(xiě)簽名,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-05-05vue關(guān)閉瀏覽器退出登錄的實(shí)現(xiàn)示例
本文主要介紹了vue關(guān)閉瀏覽器退出登錄,一般都是根據(jù)根據(jù)beforeunload和unload這兩個(gè)事件執(zhí)行的。本文就詳細(xì)的介紹一下如何實(shí)現(xiàn),感興趣的可以了解一下2021-12-12vue3使用拖拽組件draggable.next的保姆級(jí)教程
做項(xiàng)目的時(shí)候遇到了一個(gè)需求,拖拽按鈕到指定位置,添加一個(gè)輸入框,這篇文章主要給大家介紹了關(guān)于vue3使用拖拽組件draggable.next的保姆級(jí)教程,需要的朋友可以參考下2023-06-06Vue3實(shí)現(xiàn)優(yōu)雅加載圖片的動(dòng)畫(huà)效果
這篇文章主要為大家詳細(xì)介紹了Vue3如何實(shí)現(xiàn)加載圖片時(shí)添加一些動(dòng)畫(huà)效果,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,有需要的小伙伴可以參考下2023-10-10vue實(shí)現(xiàn)的上拉加載更多數(shù)據(jù)/分頁(yè)功能示例
這篇文章主要介紹了vue實(shí)現(xiàn)的上拉加載更多數(shù)據(jù)/分頁(yè)功能,涉及基于vue的事件響應(yīng)、數(shù)據(jù)交互等相關(guān)操作技巧,需要的朋友可以參考下2019-05-05Vue出現(xiàn)did you register the component 
這篇文章主要介紹了Vue出現(xiàn)did you register the component correctly?解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03vue組件傳值(高級(jí))、屬性傳值、反向傳值、跨級(jí)傳值實(shí)例詳解
父組件通過(guò)屬性傳值給子組件,父組件修改數(shù)據(jù)后會(huì)刷新頁(yè)面并重新傳值給子組件,子組件可以修改父組件傳的值并刷新自己的頁(yè)面?但是并不會(huì)修改父組件中的值,這篇文章主要介紹了vue組件傳值(高級(jí))、屬性傳值、反向傳值、跨級(jí)傳值,需要的朋友可以參考下2022-09-09查看當(dāng)前vue項(xiàng)目所需Node.js版本的方法
這篇文章主要大家介紹了查看當(dāng)前vue項(xiàng)目所需Node.js版本的方法,文章通過(guò)代碼示例給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2023-11-11使用elementUI table展開(kāi)行內(nèi)嵌套table問(wèn)題
這篇文章主要介紹了使用elementUI table展開(kāi)行內(nèi)嵌套table問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-04-04