Currently, I am attempting to create a select element using Vue.js and Material Design that has 2 levels: categories and items. Each category can contain multiple items which may be selected or not.
<md-select v-if="categories.length > 0" name="categories" id="categories" multiple >
<div v-for="(category,key,index) in categories" :key="category.id">
<md-subheader>{{category.name}}</md-subheader>
<md-option
v-if="category.subItems"
v-for="subItem in category.subItems"
:key="subItem.id"
:value="subItem.id"
selected="checkIsSelected(subItem.id)">
{{subItem.name}}
</md-option>
</div>
</md-select>
The resulting select would look something like this:
Category 1
[ ] - Item 1
[x] - Item 2
[ ] - Item 3
Category 2
...
The issue arises when attempting to determine if an item is already selected from an API. The method being used for this purpose is:
selected="checkIsSelected(subItem.id)"
Within the methods: section:
methods: {
...
checkIsSelected (catId) {
this.selectedOld.map((catOld) => {
if (catId === catOld.id) {
return true
}
})
return false
}
}
To summarize:
How can I call a function (with parameters) within an element of a v-for loop to toggle the selection state?
However, it seems that this function is not being called at all. Any advice on where I might be going wrong? I have attempted various solutions but none seem to work as expected.
Your assistance on this matter would be greatly appreciated. Thank you!