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-05
vue關(guān)閉瀏覽器退出登錄的實(shí)現(xiàn)示例
本文主要介紹了vue關(guān)閉瀏覽器退出登錄，一般都是根據(jù)根據(jù)beforeunload和unload這兩個(gè)事件執(zhí)行的。本文就詳細(xì)的介紹一下如何實(shí)現(xiàn)，感興趣的可以了解一下2021-12-12
vue3使用拖拽組件draggable.next的保姆級(jí)教程
做項(xiàng)目的時(shí)候遇到了一個(gè)需求,拖拽按鈕到指定位置，添加一個(gè)輸入框,這篇文章主要給大家介紹了關(guān)于vue3使用拖拽組件draggable.next的保姆級(jí)教程,需要的朋友可以參考下2023-06-06
vue組件通信的方式，這是在面試中一個(gè)非常高頻的問(wèn)題。其實(shí)Vue組件的通信方式除了props和?$emit還有很多，本文將對(duì)vue組件通信方式進(jìn)行一下總結(jié)，感興趣的可以學(xué)習(xí)一下2021-12-12
Vue3實(shí)現(xiàn)優(yōu)雅加載圖片的動(dòng)畫(huà)效果
這篇文章主要為大家詳細(xì)介紹了Vue3如何實(shí)現(xiàn)加載圖片時(shí)添加一些動(dòng)畫(huà)效果,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,有需要的小伙伴可以參考下2023-10-10
vue實(shí)現(xiàn)的上拉加載更多數(shù)據(jù)/分頁(yè)功能示例
這篇文章主要介紹了vue實(shí)現(xiàn)的上拉加載更多數(shù)據(jù)/分頁(yè)功能,涉及基于vue的事件響應(yīng)、數(shù)據(jù)交互等相關(guān)操作技巧,需要的朋友可以參考下2019-05-05
Vue出現(xiàn)did you register the component
這篇文章主要介紹了Vue出現(xiàn)did you register the component correctly?解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
vue組件傳值(高級(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