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))