Vue中数据层级深，修改状态页面不更新？forEach循环解决方案

在Vue中，如果通过forEach循环修改了某个状态，但页面没有发生变化，可能是因为Vue无法检测到这种直接赋值的变化。为了解决这个问题，可以使用Vue.set方法或者使用响应式的数据结构。

使用Vue.set方法： Vue.set(obj, key, value) 可以向响应式对象中添加一个新的属性，并确保这个新属性同样是响应式的。在上面的例子中，可以使用Vue.set来修改cardItem的状态，代码如下：

this.orderList.forEach(orderItem => {
  if (orderItem.cardList && orderItem.cardList.length) {
    orderItem.cardList.forEach(cardItem => {
      if (cardItem.cardPwd === cardPwd) {
        Vue.set(cardItem, 'cardStatus', 'discarded');
      }
    })
  }
})

使用响应式的数据结构：在Vue中，可以使用响应式的数据结构来确保数据的变化能够被检测到。例如，可以将orderList和cardList定义为响应式的数组或对象，然后使用Vue.set或者Vue.set方法来修改状态。示例代码如下：

data() {
  return {
    orderList: [
      {
        cardList: [
          { cardPwd: '123', cardStatus: 'active' },
          { cardPwd: '456', cardStatus: 'active' }
        ]
      }
    ]
  }
},
methods: {
  discardCard(cardPwd) {
    this.orderList.forEach(orderItem => {
      if (orderItem.cardList && orderItem.cardList.length) {
        orderItem.cardList.forEach(cardItem => {
          if (cardItem.cardPwd === cardPwd) {
            cardItem.cardStatus = 'discarded';
          }
        })
      }
    })
  }
}

在模板中调用discardCard方法来修改状态：

<template>
  <div>
    <div v-for="orderItem in orderList" :key="orderItem.id">
      <div v-for="cardItem in orderItem.cardList" :key="cardItem.id">
        <span>{{ cardItem.cardStatus }}</span>
        <button @click="discardCard(cardItem.cardPwd)">Discard</button>
      </div>
    </div>
  </div>
</template>

以上两种方法都可以确保修改状态后页面能够正确地更新。