Within my Vue-app, I am attempting to iterate through an array of data that contains multiple checkboxes.
filters: [
{
name: "Sales & marketing",
open: false,
items: [
{
employees_cvr: {
placeholder: "employees",
checked: false,
click: data => {
...
}
},
employees_pnr: {
placeholder: "employees_pnr",
checked: false,
click: data => {
...
}
},
date_of_origin: {
placeholder: "Date of origin",
checked: false,
click: data => {
console.log(data);
}
},
company_search: {
placeholder: "Search for companies",
checked: false,
click: data => {
...
}
}
}
]
}
However, when I attempt to loop through the data like this:
<div v-for="filter in filters" :key="filter.id" class="category">
<label @click="filter.open = !filter.open">{{filter.name}}</label>
<div class="category__rows">
<ul v-show="filter.open">
<li v-for="item in filter.items" :key="item.id">
<Checkbox v-bind:data.sync="item" />
</li>
</ul>
</div>
</div>
The issue arises as I am able to display the name from the object, but not the items within. Upon clicking the label to set the state as open = true, the <ul> is visible but devoid of any data.
Can someone please assist me in identifying my mistake and provide guidance?