JSFiddle - React, Tailwind, and code Playground
HTML
<div id="vue">
<div v-for="item, i in items">
<span v-if="!closedItems[i]">
<span>pppp</span>
<span>pppp</span>
<span>pppp</span>
<span>pppp</span>
<span>pppp</span>
{{i}}
</span>
<button @click="$set(closedItems, i, !closedItems[i])">{{closedItems[i] ? 'Open' : 'Close'}}</button>
</div>
</div>
JavaScript
new Vue({
el:'#vue',
data(){
return {
items:[
{content:'Aardvark'},
{content:'Aardwolf'},
{content:'Albatross'},
{content:'Alligator'},
{content:'Alpaca'}
],
closedItems:[5,4,3,2,1,0] //using a separate array, because we might not want to modify the items array
}
}
})