Vue 应用程序中的嵌套 v-for 使用之前的状态

Posted 2023-02-23

【中文标题】Vue 应用程序中的嵌套 v-for 使用之前的状态

【英文标题】：Nested v-for in Vue app uses the previous state

【发布时间】：2021-05-27 22:43:06

【问题描述】：

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

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

我已经在 Codepen 中设置了代码 https://codepen.io/akrug23/pen/jOVYQPd?editors=0011

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

自己管理 -> 低 -> 0-5 年现在单击“中”，您会看到第一个按钮已设置为 active 类

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

提前谢谢你。

【参考方案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 节点。但它仅在键对列表项是唯一的情况下才有效。有时使用index 作为键不够唯一，这就是这里发生的情况。

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