Only show associated data in v-for
I have the following code:
-
Add a property called currentIndex then update it using the click event and use it in conditional rendering :
<template>
<div>
<div v-for="(title,index) in titles">
<h1>{{ title }}</h1>
<a @click="showSub(index)">Click Here</a>
<div v-if="currentIndex===index">
Shown
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
currentIndex:-1,
titles: []
}
},
methods: {
showSub: function (index) {
this.currentIndex=this.currentIndex===index?-1:index
// do something more
}
}
}
</script>
讨论(0)
加载中...
- 热议问题