多層v-for循環嵌套導致v-model雙向綁定失敗,頁面不重新渲染


數據格式是數組包對象,對象里面再包數組,數組再包對象,如下:

 

 外層for遍歷出editInfo里面所有的屬性,內層for遍歷Options。

最終實現樣子

 

 

兩個問題:

1.點加減按鈕的時候往options里push/pop一條數據,代碼執行了,options也變了,但是頁面沒重新渲染

2.v-model綁定options里面的value,編輯輸入框打不進去字,一旦修改了options同級的內容(也就是第一層for)后編輯的文字就顯示出來了,也是頁面沒渲染的問題,vue沒有檢測到改變

問題分析:

js直接動態修改數組[]或對象{}里面的屬性/值時,vue不會檢測到改變,頁面不會重新渲染。

可以使用Vue.set(數組/對象,下標/屬性,值);

或this.$set(數組/對象,下標/屬性,值);

這次不同,這次是用的v-model,而且用的是數組自帶的一些vue能檢測的方法,

解決問題:

1.push/pop完了執行this.$forceUpdate();方法強制更新

2.使用v-model的input上加@input="forceUpdate();" 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM