JSFiddle - React, Tailwind, and code Playground
HTML
<div id="app">
<ul class="list">
<li v-for="(b, index) in blocks">
<div v-on:click="toggleBlocks(index)">{{ b.name }}</div>
<div v-show="b.isShow" class="block">{{ index + 1 }} block</div>
</li>
</ul>
</div>
JavaScript
new Vue({
el: '#app',
data: {
blocks: [
{ isShow: false, name: 'Один' },
{ isShow: false, name: 'Два' },
{ isShow: false, name: 'Три' }
]
},
methods: {
toggleBlocks: function(index){
this.blocks.forEach(function(item, i){
item.isShow = i === index;
});
}
}
})