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ù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要為大家詳細介紹了vue+canvas實現(xiàn)移動端手寫簽名，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-05-05
本文主要介紹了vue關閉瀏覽器退出登錄，一般都是根據(jù)根據(jù)beforeunload和unload這兩個事件執(zhí)行的。本文就詳細的介紹一下如何實現(xiàn)，感興趣的可以了解一下2021-12-12
vue3使用拖拽組件draggable.next的保姆級教程
做項目的時候遇到了一個需求,拖拽按鈕到指定位置，添加一個輸入框,這篇文章主要給大家介紹了關于vue3使用拖拽組件draggable.next的保姆級教程,需要的朋友可以參考下2023-06-06
vue組件通信的方式，這是在面試中一個非常高頻的問題。其實Vue組件的通信方式除了props和?$emit還有很多，本文將對vue組件通信方式進行一下總結，感興趣的可以學習一下2021-12-12
這篇文章主要為大家詳細介紹了Vue3如何實現(xiàn)加載圖片時添加一些動畫效果,文中的示例代碼講解詳細,具有一定的借鑒價值,有需要的小伙伴可以參考下2023-10-10
vue實現(xiàn)的上拉加載更多數(shù)據(jù)/分頁功能示例
這篇文章主要介紹了vue實現(xiàn)的上拉加載更多數(shù)據(jù)/分頁功能,涉及基于vue的事件響應、數(shù)據(jù)交互等相關操作技巧,需要的朋友可以參考下2019-05-05
Vue出現(xiàn)did you register the component
這篇文章主要介紹了Vue出現(xiàn)did you register the component correctly?解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
vue組件傳值(高級)、屬性傳值、反向傳值、跨級傳值實例詳解
父組件通過屬性傳值給子組件，父組件修改數(shù)據(jù)后會刷新頁面并重新傳值給子組件，子組件可以修改父組件傳的值并刷新自己的頁面?但是并不會修改父組件中的值，這篇文章主要介紹了vue組件傳值（高級）、屬性傳值、反向傳值、跨級傳值,需要的朋友可以參考下2022-09-09
這篇文章主要大家介紹了查看當前vue項目所需Node.js版本的方法,文章通過代碼示例給大家介紹的非常詳細,對大家的學習或工作有一定的幫助,需要的朋友可以參考下2023-11-11
使用elementUI table展開行內嵌套table問題
這篇文章主要介紹了使用elementUI table展開行內嵌套table問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04