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