Vue app 中嵌套的 v-for 使用之前的状态

Question

我是 Vue.js 的新手，我正在尝试编写决策树代码，但我遇到了问题。当人们在一个步骤上单击按钮时，它会根据 JSON 文件加载另一个步骤。用户应该能够跳回到上一步并从该组重置它并允许他们从那里完成它。

我遇到的问题是，选择上一步后加载的步骤仍会应用活动 class。我很确定这与 v-for 循环中的 :key 有关，但我不知道如何重置它以便 Vue 不保存该设置。

您可以通过单击以下按钮来重现我所说的内容

自己管理 -> 低 -> 0-5 岁现在点击中，您会看到第一个按钮已经设置为 class active

注意：由于很多问题都是相同的，所以我在前面添加了数字，这样您就可以看到正在加载 JSON 文件中的其他问题。我正在使用 Vue.js 3

提前致谢。

Answer 1

将 BranchSteps 组件中的键更改为问题独有的内容，例如 item.question 中的 question 文本：

<div
  v-for="(item, index) in steps"
  :key="item.question"
  :data-step-id="index"
  class="card mb-2 js-step-card"
  :class="isLastCard(index)">

在 v-for 中使用 key 的原因是 Vue 在重新渲染列表时不会重用任何现有的 DOM 节点，例如当一个项目是 added/destroyed。但只有当键对于列表项是唯一的时它才有效。有时使用 index 作为键不够唯一，这就是这里发生的情况。

上面的唯一键导致 Vue 使用新信息重新渲染节点，而不是重新使用已删除项目的 ghost 节点。

Nested v-for in Vue app uses the previous state