I have been working on my test case using Vue and I recently created a component called MultiAccordion. My intention was to open each slide based on the value of the status[index] flag. However, I am encountering an issue as this component does not seem to be functioning correctly. Can anyone help me understand why it is not working properly?
var MultiAccordion = {
data: function() {
return {
items: [
'cat',
'dog',
'bird',
],
status: [],
};
},
created: function() {
for (let i = 0; i < this.items.length; ++i) {
this.status.push(false);
}
},
methods: {
handleToggle: function(index) {
this.status[index] = !this.status[index];
},
},
template: `
<ul>
<li v-for="(val, index) in items">
<button @click="handleToggle(index)">toggle</button>
<div v-if="status[index]">
{{ val }}
</div>
</li>
</ul>
`,
};