v-for中怎么做点哪个显示或隐藏哪个

来源：9-6 Vue项目详情页 - 使用递归组件实现详情页列表

你的粉丝_啊德

2019-06-03

<template>
<div>
<div class="item" v-for= "(item, index) of list" :key = "index">
<div class="item-title" @click = "examineClick(itemShow)"><span class="ticket-icon"></span>{{item.title}}</div>
<div class="item-children" v-if = "itemShow">
<detail-list :list = "item.children"></detail-list>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'detail-list',
props: {
list: Array
},
data(){
return {
itemShow: false,
}
},
methods: {
examineClick(itemShow){
this.itemShow = !itemShow
console.log(this.itemShow)
}
}
}
</script>

比如这个递归，v-if = "itemShow"这个在for循环中，如何定义和操作不同的v-if的显示和隐藏，

上面代码中，就是点击一个，同级的也显示出来了，就是如图中，点击成人票时，其他学生票和老人票的下一层级的也显示出来，要点哪个显示或隐藏哪个，这种效果怎么做？

写回答

2回答

六一888

2019-06-04

已采纳

你写个三元运算符就行了

<script>
export default {
name: 'DetailList',
props: {
list: Array
},
data () {
return {
nowIndex: 0
}
},
methods: {
handleDivClick (index) {
this.nowIndex = this.nowIndex === index ? -1 : index
}
}
}
</script>

你的粉丝_啊德

好的，谢谢

2019-06-04

共1条回复

六一888

2019-06-04

v-if 中你不能简单的通过改变布尔值，因为他们共用的是一个组件（递归组件的原理是不断地自我调用，通过 v-if 来决定递归的基准条件），我的方法是使用一个中间变量 nowIndex 就可以制定只有当点击的元素才能变成 true。

<template>
<div>
<div class="item" v-for="(item, index) of list" :key="index">
<div class="item-title" @click = "handleDivClick(index)" border-bottom>
<span class="item-title-icon"></span>
{{item.title}}
</div>
<div class="item-children" v-show="nowIndex === index">
<detail-list :list="item.children"></detail-list>
</div>
</div>
</div>
</template>

<script>
export default {
name: 'DetailList',
props: {
list: Array
},
data () {
return {
nowIndex: 0
}
},
methods: {
handleDivClick (index) {
this.nowIndex = index
}
}
}
</script>