vue項目中input輸入框輸入不了值問題及解決
更新時間：2023年04月23日 09:10:36 作者：ノＨonEy°倩
這篇文章主要介紹了vue項目中input輸入框輸入不了值問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
編輯頁面v-model 綁定的input 輸入框輸入不了值
原因
- 對象 會遞歸遍歷data中定義的所有變量 所以如果沒定義就監(jiān)聽不到變化
- 數(shù)組只有幾個數(shù)組方法添加的會響應(yīng) 通過下標(biāo)不響應(yīng)（push,pop會不響應(yīng)）
解決方案
在獲取到后端的數(shù)據(jù)后，定義一個新的對象，把后端數(shù)值接收到這個新的對象中，再把新的對象賦值給 data里面定義的對象
?? ?if(res.data.success == true){
? ? ?? ?let resForm={} ?//重新定義一個對象
? ? ??? ?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技能點--el-input輸入框無法輸入、無法修改
現(xiàn)象
使用Vue框架，發(fā)現(xiàn)輸入框<input>或者<el-input>的內(nèi)容無法修改，也無法輸入。
解決方案
首先，檢查綁定方式，應(yīng)該使用v-model，有時候會誤用:value，導(dǎo)致無法修改。
其次，如果是綁定數(shù)組元素等復(fù)雜對象，可以在輸入框添加@input="onInput()"，然后在methods中添加方法：
? ?? ?onInput() {
? ? ? this.$forceUpdate();
? ? },forceUpdate用來強制渲染，避免data中對象層次太深，Vue框架不自動渲染的情況。
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
使用vue構(gòu)建移動應(yīng)用實戰(zhàn)代碼
本篇文章主要介紹了使用vue構(gòu)建移動應(yīng)用實戰(zhàn)代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
這篇文章主要介紹了編寫更好的v-for循環(huán)的6種技巧，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2020-12-12
在使用vuex的時候出現(xiàn)commit未定義錯誤的解決
這篇文章主要介紹了在使用vuex的時候出現(xiàn)commit未定義錯誤的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
vue+elementUi實現(xiàn)點擊地圖自動填充經(jīng)緯度以及地點
這篇文章主要為大家詳細(xì)介紹了vue+elementUi實現(xiàn)點擊地圖自動填充經(jīng)緯度以及地點，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
這篇文章主要介紹了React和Vue中監(jiān)聽變量變化的方法,本文通過一個場景，父組件傳遞子組件一個A參數(shù)，子組件需要監(jiān)聽A參數(shù)的變化轉(zhuǎn)換為state，具體內(nèi)容詳情大家跟隨小編一起通過本文學(xué)習(xí)吧2018-11-11
利用Vue模擬實現(xiàn)element-ui的分頁器效果
這篇文章主要為大家詳細(xì)介紹了如何利用Vue模擬實現(xiàn)element-ui的分頁器效果，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以動手嘗試一下2022-11-11
這篇文章主要為大家介紹了Vue插槽解決父子組件通信，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-11-11
這篇文章主要為大家詳細(xì)介紹了Vue組件中的自定義事件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-02-02
這篇文章主要為大家介紹了keep?alive用法及原理示例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
Vue使用Three.js創(chuàng)建交互式3D場景的全過程
在現(xiàn)代Web開發(fā)中,通過在頁面中嵌入3D場景,可以為用戶提供更加豐富和交互性的體驗,Three.js是一款強大的3D JavaScript庫,它簡化了在瀏覽器中創(chuàng)建復(fù)雜3D場景的過程,本文將介紹如何在Vue中使用Three.js,創(chuàng)建一個簡單的交互式3D場景,需要的朋友可以參考下2023-11-11