问题描述
我是 Vue.js 的新手,我正在尝试编写决策树,但我遇到了问题。当人们单击一个步骤上的按钮时,它会根据 JSON 文件加载另一个步骤。用户应该能够跳回到上一步并从该设置重置并允许他们从那里开始工作。
我遇到的问题是,选择上一步后加载的步骤仍将应用活动类。我很确定这与 object.getIPhone()
循环中的 :key
有关,但我不知道如何重置它以便 Vue 不保存该设置。
我已经在此处的 Codepen 中设置了代码 https://codepen.io/akrug23/pen/jOVYQPd?editors=0011
您可以通过单击以下按钮重现我所说的
自己管理 -> 低 -> 0-5 年现在点击中,你会看到第一个按钮已经设置了类 v-for
注意:由于很多问题都是相同的,我在前面添加了数字,以便您可以看到 JSON 文件中的其他问题正在加载。我正在使用 Vue.js 3
提前致谢。
解决方法
将 BranchSteps
组件中的键更改为问题独有的内容,例如 question
中的 item.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)">
在 key
中使用 v-for
的原因是当列表被重新渲染时,Vue 不会重用任何现有的 DOM 节点,例如当一个项目被添加/销毁时。但它仅在键对列表项唯一时才有效。有时使用 index
作为键不够独特,这就是这里发生的情况。
上面的唯一键会导致 Vue 使用新信息重新渲染节点,而不是重新使用已删除项的幽灵节点。