亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

vue項(xiàng)目中input輸入框輸入不了值問(wèn)題及解決

 更新時(shí)間:2023年04月23日 09:10:36   作者:ノHonEy°倩  
這篇文章主要介紹了vue項(xiàng)目中input輸入框輸入不了值問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

編輯頁(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)代碼

    本篇文章主要介紹了使用vue構(gòu)建移動(dòng)應(yīng)用實(shí)戰(zhàn)代碼,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2017-08-08
  • 編寫v-for循環(huán)的技巧匯總

    編寫v-for循環(huán)的技巧匯總

    這篇文章主要介紹了編寫更好的v-for循環(huán)的6種技巧,幫助大家更好的理解和使用vue框架,感興趣的朋友可以了解下
    2020-12-12
  • 在使用vuex的時(shí)候出現(xiàn)commit未定義錯(cuò)誤的解決

    在使用vuex的時(shí)候出現(xiàn)commit未定義錯(cuò)誤的解決

    這篇文章主要介紹了在使用vuex的時(shí)候出現(xiàn)commit未定義錯(cuò)誤的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-01-01
  • vue+elementUi實(shí)現(xiàn)點(diǎn)擊地圖自動(dòng)填充經(jīng)緯度以及地點(diǎn)

    vue+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
  • React和Vue中監(jiān)聽變量變化的方法

    React和Vue中監(jiān)聽變量變化的方法

    這篇文章主要介紹了React和Vue中監(jiān)聽變量變化的方法,本文通過(guò)一個(gè)場(chǎng)景,父組件傳遞子組件一個(gè)A參數(shù),子組件需要監(jiān)聽A參數(shù)的變化轉(zhuǎn)換為state,具體內(nèi)容詳情大家跟隨小編一起通過(guò)本文學(xué)習(xí)吧
    2018-11-11
  • 利用Vue模擬實(shí)現(xiàn)element-ui的分頁(yè)器效果

    利用Vue模擬實(shí)現(xiàn)element-ui的分頁(yè)器效果

    這篇文章主要為大家詳細(xì)介紹了如何利用Vue模擬實(shí)現(xiàn)element-ui的分頁(yè)器效果,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以動(dòng)手嘗試一下
    2022-11-11
  • 解決父子組件通信的三種Vue插槽

    解決父子組件通信的三種Vue插槽

    這篇文章主要為大家介紹了Vue插槽解決父子組件通信,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來(lái)幫助
    2021-11-11
  • Vue組件中的自定義事件你了解多少

    Vue組件中的自定義事件你了解多少

    這篇文章主要為大家詳細(xì)介紹了Vue組件中的自定義事件,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來(lái)幫助
    2022-02-02
  • 五分鐘理解keep?alive用法及原理

    五分鐘理解keep?alive用法及原理

    這篇文章主要為大家介紹了keep?alive用法及原理示例解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-07-07
  • Vue使用Three.js創(chuàng)建交互式3D場(chǎng)景的全過(guò)程

    Vue使用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

最新評(píng)論