Vue循环中点击箭头图标，导致所有图标同时变化的解决方法
在Vue循环中，点击一个箭头图标却导致所有图标同时变化，其根本原因在于所有菜单组共用同一个show属性。这意味着所有组的状态都相同，从而产生这种不期望的行为。
解决这个问题的关键在于为每个菜单组设置独立的show属性。 修改后的代码如下：
<code class="vue"><template v-for="(data, index) in menuGroups" :key="data.id"> <icon ... :type="data.show ? 'ios-arrow-up' : 'ios-arrow-down'" @click="toggleShow(index)"></icon> </template></code>
通过为每个数据元素(data)分配其自身的show属性，每个组的状态将彼此独立。只有点击的组的show值才会改变，从而避免影响其他组。 data.id 应该替换为数据中唯一标识符。
立即学习“前端免费学习笔记（深入）”；
此外，代码中使用了data.id作为:key，而不是index。使用index作为:key在数据变化时可能会导致Vue无法正确识别列表元素的更新，从而出现问题。 确保使用数据中唯一且稳定的属性作为:key，例如data.id，可以确保列表元素的正确渲染和更新。
记住，toggleShow方法应该更新对应菜单组的show属性：
<code class="javascript">methods: {
toggleShow(index) {
this.menuGroups[index].show = !this.menuGroups[index].show;
}
}</code>通过以上修改，每个箭头图标将独立控制其对应菜单组的显示/隐藏状态，从而解决所有图标同时变化的问题。
以上就是Vue循环中点击箭头图标，为何所有图标都同时改变？的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
168
