Vue 嵌套數組 數組更新視圖不更新

關於Vue的響應式原理，可以看官方文檔或其他資料，

 

https://www.jianshu.com/p/34de360d6035

 

data里定義了一個數組arr，數組的元素可以是同樣格式的數組arrChild（數組嵌套），如果只改變最外層的元素即arr的元素，視圖可以更新，如果改變的是arrChild里邊的數據（內層元素），視圖不會自動更新。

 

比如有這樣一個功能：根據id刪除刪除一條數據，需要循環遍歷整個數組及子數組，

 

this.removeData(this.data, id)

removeData (items, id) {
  items.forEach((item, index) => {
    if (item.id === id) {
      items.splice(index, 1)
      console.log('這相等了', item, items)
      return items
    }
    if (item.children) {
      item.children = (this.removeData(item.children, id))
     // 使用splice方法去更新改變后的子數組，
      items.splice(index, 1, item)
    }
  })
  console.log(2, this.poi++, items)
  return items
}    

如果有子數組則遞歸調用removeData方法， 在修改子數組后，返回該子數組，使用splice方法更新該數組元素。

 

data ：

 data: [{
        id: '1',
        code: '0001',
        name: '測試數據1',
        status: '啟用',
        remark: '測試數據測試數據'
      }, {
        id: '2',
        code: '0002',
        name: '測試數據2',
        status: '啟用',
        remark: '測試數據測試數據',
        children: [{
          id: '01',
          code: '00001',
          name: '測試數據01',
          status: '啟用',
          remark: '測試數據測試數據'
        }, {
          id: '02',
          code: '00002',
          name: '測試數據02',
          status: '啟用',
          remark: '測試數據測試數據',
          children: [{
            id: '001',
            code: '000001',
            name: '測試數據001',
            status: '啟用',
            remark: '測試數據測試數據'
          }, {
            id: '002',
            code: '000002',
            name: '測試數據002',
            status: '啟用',
            remark: '測試數據測試數據'
          }]
        }]
      }, {
        id: '3',
        code: '0003',
        name: '測試數據3',
        status: '啟用',
        remark: '測試數據測試數據'
      }, {
        id: '4',
        code: '0004',
        name: '測試數據4',
        status: '啟用',
        remark: '測試數據測試數據'
      }]

 

PS：

拷貝對象或者數組時，可以使用擴展運算符 "..."。如果對象或者數組中包含子對象和子數組，使用JSON.parse(JSON.stringify(str)) 。

const obj3 = {...obj}
const itemsCopy = [...items]
const itemsCopySub = JSON.parse(JSON.stringify(items))