數據格式是數組包對象,對象里面再包數組,數組再包對象,如下:
外層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();"