javascript - Vue 应用程序中的嵌套 v-for 使用之前的状态
问题描述
我是 Vue.js 的新手,我正在尝试编写决策树,但我遇到了问题。当人们单击一个步骤上的按钮时,它会加载基于 JSON 文件的另一个步骤。用户应该能够跳回上一步并从该设置中重置并允许他们从那里完成它。
我遇到的问题是,在选择上一步后加载的步骤仍将应用活动类。我很确定这与循环:key
有关,v-for
但我不知道如何重置它,以便 Vue 不会保存该设置。
我已经在 Codepen 中设置了代码https://codepen.io/akrug23/pen/jOVYQPd?editors=0011
您可以通过单击以下按钮来重现我所说的内容
自己管理 -> 低 -> 0-5 年现在单击“中”,您将看到第一个按钮已设置为类active
注意:由于很多问题都是相同的,我在前面添加了数字,因此您可以看到 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
在 a 中使用 a 的原因v-for
是,当列表重新渲染时,例如添加/销毁项目时,Vue 不会重用任何现有的 DOM 节点。但它仅在键对列表项是唯一的情况下才有效。有时index
用作键不够独特,这就是这里发生的事情。
上面的唯一键导致 Vue 使用新信息重新渲染节点,而不是重用已删除项目的幽灵节点。
推荐阅读
- javascript - 本机基础文本仅在某些屏幕上显示大写
- html - aa按钮上的CSS按钮悬停效果不起作用
- sharepoint-2013 - 创建项目时自动添加一年到日期列
- java - 如何计算具有超出范围值的任何原语的值
- c# - WPF:无法正确设置边距
- azure - 如何在 Azure AD 中添加 AzureDatabrick 的权限
- javascript - 描述并提示函数需要哪些参数
- amazon-web-services - 使用数据迁移工具管理 AWS Parameter Store 变量
- javascript - 在 JavaScript 中睡觉
- c# - 访问无 Monobehaviour 类视图 Photonview