vue項(xiàng)目中input輸入框輸入不了值問題及解決
更新時(shí)間：2023年04月23日 09:10:36 作者：ノＨonEy°倩
這篇文章主要介紹了vue項(xiàng)目中input輸入框輸入不了值問題及解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
編輯頁面v-model 綁定的input 輸入框輸入不了值
原因
- 對象 會遞歸遍歷data中定義的所有變量 所以如果沒定義就監(jiān)聽不到變化
- 數(shù)組只有幾個(gè)數(shù)組方法添加的會響應(yīng) 通過下標(biāo)不響應(yīng)（push,pop會不響應(yīng)）
解決方案
在獲取到后端的數(shù)據(jù)后，定義一個(gè)新的對象，把后端數(shù)值接收到這個(gè)新的對象中，再把新的對象賦值給 data里面定義的對象
?? ?if(res.data.success == true){
? ? ?? ?let resForm={} ?//重新定義一個(gè)對象
? ? ??? ?resForm={...res.data.data.activityInfo}
? ? ??? ?resForm.activeTime=[res.data.data.activityInfo.startTime,res.data.data.activityInfo.endTime], ? ? ? ? ? ? ? ? ?
? ? ??? ?resForm.listOne=res.data.data.listOne
?? ? ?? ?resForm.listTwo=res.data.data.listTwo
?? ? ?? ?this.formData={...resForm} ?//把定義的對象賦值給data里面定義的對象
?? ? ?? ?console.log(this.formData,2121212121)
? }vue技能點(diǎn)--el-input輸入框無法輸入、無法修改
現(xiàn)象
使用Vue框架，發(fā)現(xiàn)輸入框<input>或者<el-input>的內(nèi)容無法修改，也無法輸入。
解決方案
首先，檢查綁定方式，應(yīng)該使用v-model，有時(shí)候會誤用:value，導(dǎo)致無法修改。
其次，如果是綁定數(shù)組元素等復(fù)雜對象，可以在輸入框添加@input="onInput()"，然后在methods中添加方法：
? ?? ?onInput() {
? ? ? this.$forceUpdate();
? ? },forceUpdate用來強(qiáng)制渲染，避免data中對象層次太深，Vue框架不自動渲染的情況。
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue組件的繼承用法,本文通過實(shí)例代碼案例講解給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-08-08
如何在Vue3中正確使用ElementPlus,親測有效,避坑
這篇文章主要介紹了如何在Vue3中正確使用ElementPlus,親測有效,避坑！具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)無縫輪播效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-05-05
解決vue路由發(fā)生了跳轉(zhuǎn)但是界面沒有任何反應(yīng)問題
這篇文章主要介紹了解決vue路由發(fā)生了跳轉(zhuǎn)但是界面沒有任何反應(yīng)問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
詳解vue-cli3開發(fā)Chrome插件實(shí)踐
這篇文章主要介紹了vue-cli3開發(fā)Chrome插件實(shí)踐，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)列表無縫滾動效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要介紹了Vue 重置組件到初始狀態(tài)的方法示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-10-10
前端單獨(dú)實(shí)現(xiàn)vue動態(tài)路由的示例代碼
Vue動態(tài)路由權(quán)限涉及根據(jù)用戶權(quán)限動態(tài)生成路由配置,實(shí)現(xiàn)此功能可增強(qiáng)應(yīng)用安全性、靈活性,提升用戶體驗(yàn)和開發(fā)效率,本文就來介紹一下前端單獨(dú)實(shí)現(xiàn)vue動態(tài)路由的示例代碼,感興趣的可以了解一下2024-09-09
Vue.js 實(shí)現(xiàn)tab切換并變色操作講解
這篇文章主要介紹了Vue.js 實(shí)現(xiàn)tab切換并變色操作講解,本篇文章通過簡要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-09-09
Element Plus 日期選擇器獲取選中的日期格式(當(dāng)前日期/時(shí)間戳格式）
如果想要獲取選中的日期時(shí)間就需要通過,Element Plus 日期選擇器?format屬性和value-format屬性,format指定輸入框的格式,value-format?指定綁定值的格式,本篇文章就給大家介紹Element Plus 日期選擇器獲取選中的日期格式(當(dāng)前日期/時(shí)間戳格式）,感興趣的朋友一起看看吧2023-10-10