只显示 v-for 中的关联数据 [英] Only show associated data in v-for
本文介绍了只显示 v-for 中的关联数据的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有以下代码:
<div><div v-for=标题中的标题"><h1>{{title}}</h1><a @click="showSub">点击这里</a><div v-if="subshown">显示</模板><脚本>导出默认{数据() {返回 {子显示:假，标题:[]}},方法: {showSub: 函数 () {this.subshown = true;//做更多的事情}}}
当我现在单击 Click Here 按钮时，应显示当前标题的相关 subshown.目前，当我点击 Click Here 时，会显示所有 subshown.
如何实现只显示关联?
解决方案
添加一个名为 currentIndex 的属性，然后使用点击事件更新它并在条件渲染中使用它:
<div><div v-for="(title,index) in titles"><h1>{{title}}</h1><a @click=showSub(index)">点击这里</a><div v-if="currentIndex===index">显示