vue?el-input輸入框輸入不了的解決方法
一、問題
1.今天寫代碼遇到了一個很奇葩的問題：寫了很多個輸入框，其他輸入框都沒有問題，就最后一個單獨(dú)處理的有問題，輸入框里面輸入不了東西。著實不明白為什么，一遍又一遍抱怨，重復(fù)輸入，里面還是除了原有的值什么都輸不了。
除了原有的3,什么都輸不了
二、解決方法
1.用vue dev-tools審查了才發(fā)現(xiàn)這個輸入框無論輸入什么，value值都是不變化，盡管 也觸發(fā)了input事件（和html沒有關(guān)系）
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.仔細(xì)比較兩個地方有什么不同，好像也沒有什么區(qū)別，如圖2-1所示。
終于突發(fā)奇想，看到了下面沒有reactive，可能是響應(yīng)性丟失（根本原因）了。
圖2-1 兩段聲明，也沒有特殊邏輯
3.于是在下面的聲明上也加上了reactive，竟然好了，可以輸入了?。?！
三、總結(jié)
1.天哪，我也是沒有料到竟然是因為響應(yīng)式丟失，導(dǎo)致無法輸入的(value無法更新）；世界很大，無奇不有，掉進(jìn)坑里很迷茫。
2.遇到輸入框無法輸入可以：
1）先檢查html，查看input輸入事件是否觸發(fā);觸發(fā)了，則html是正確的
2）檢查v-model綁定的值：必須是響應(yīng)式的(在data選項中定義的，或是setup函數(shù)中用reactive或ref顯示聲明為響應(yīng)式數(shù)據(jù)）
到此這篇關(guān)于vue el-input輸入框輸入不了解決的文章就介紹到這了,更多相關(guān)vue el-input輸入框輸入不了內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
自定義指令是 vue 中使用頻率僅次于組件，其包含 bind 、 inserted 、 update 、 componentUpdated 、 unbind 五個生命周期鉤子，接下來通過本文給大家詳細(xì)介紹Vue指令工作原理實現(xiàn)方法，需要的朋友參考下吧2021-06-06
本文主要介紹了在Vue3項目中實現(xiàn)常見文件類型的預(yù)覽功能,包括docx、xlsx、pdf、txt、png、jpg、jpeg、mp4和mp3,具有一定的參考價值,感興趣的可以了解一下2025-01-01
vue項目 npm run build 打包項目防止瀏覽器緩存的操作方法
這篇文章主要介紹了vue項目 npm run build 打包項目防止瀏覽器緩存的操作方法,本文給大家推薦兩種方法，每種方法通過實例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-08-08
下面小編就為大家分享一篇Vue之Vue.set動態(tài)新增對象屬性方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
Vue3使用video-player實現(xiàn)視頻播放
video-player是一個基于video.js的視頻播放器組件,本文主要介紹了Vue3使用video-player實現(xiàn)視頻播放,具有一定的參考價值,感興趣的可以了解一下2024-01-01
vue+Vue Router多級側(cè)導(dǎo)航切換路由(頁面)的實現(xiàn)代碼
這篇文章主要介紹了vue+Vue Router多級側(cè)導(dǎo)航切換路由(頁面)的實現(xiàn)代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
這篇文章主要介紹了VUE動態(tài)生成word的實現(xiàn)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要為大家詳細(xì)介紹了Vue3使用訊飛大模型的相關(guān)知識,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-12-12
解決vue項目報錯webpackJsonp is not defined問題
下面小編就為大家分享一篇解決vue項目報錯webpackJsonp is not defined問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
vue3 emit is not a function問題及解決
這篇文章主要介紹了vue3 emit is not a function問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-09-09