I’m using vue.js
and have a list of items that when clicked opens each individual div. How can I get my button to open each one individually instead of opening all of them when clicked?
I don’t want to pass isOpened
as another key, value
in my object, so Somehow I need this as being the index of the button getting clicked
vue.js
<div v-for="(item, index) in items" :key="index">
<div class="item">
<button @click="toggleItem">Toggle the {{item.name}}</button>
<div class="toggle-item" v-show="toggled">
{{ item.name }}
{{ item.title }}
</div>
</div>
</div>
data
export default {
data:() => ({
toggled: false,
items: [
{
name: 'First List',
title: 'First title'
},
{
name: 'Second List',
title: 'Second title'
},
{
name: 'third list',
title: 'third title'
}
]
}),
methods: {
toggleItem: function() {
this.toggled = !this.toggled;
}
}
}
style
.item {
height: 40px;
width: 200px;
background: #cccccc;
margin-bottom: 20px;
}
.toggle-item {
background: red;
height: 100px;
width: 100px;
}