Currently, I am navigating through an array in my VUE application that holds the following structured data:
[
{
"id": 1,
"brands": [
{
"name": "Mall",
"id": 1
},
{
"name": "Tanted",
"id": 25
},
{
"name": "Anteil",
"id": 12
},
{
"name": "Moscard",
"id": 73
}
]
},
{
"id": 2,
"brands": [
{
"name": "Yanre",
"id": 6
},
{
"name": "Alted",
"id": 10
},
{
"name": "Sillex",
"id": 9
},
{
"name": "Straf",
"id": 78
}
]
}
]
To display the various select options based on id, I initially apply a filter by id as shown below:
computed: {
filteredBrand() {
var selectedBrand =
!this.businessInfo || this.businessInfo.selectedBrand == 0
? 1
: this.businessInfo.selectedBrand;
return !this.$store.getters.brands
? null
: this.$store.getters.brands.filter(
item => item.id == selectedBrand
)[0].brands;
}
}
<select
v-model="businessInfo.selectedBrand"
@change="onChangeBrand($event)">
<option v-for="brand in filteredBrand" v-bind:key="brand.name">{{ brand.name }}</option>
</select>
While successful in displaying brands corresponding to each id in alphabetical order is also desired. Despite attempts, combining the filter with sort proved challenging due to syntax errors. Here's the attempt made:
computed: {
filteredBrand() {
var selectedBrand =
!this.businessInfo || this.businessInfo.selectedBrand == 0
? 1
: this.businessInfo.selectedBrand;
return !this.$store.getters.brands
? null
: this.$store.getters.brands.filter(
item => item.id == selectedBrand
)[0].brands.sort(function(a, b) {
return a.name === b.name ? 0 : +(a.name > b.name) || -1;
});
}
}
If anyone has insights on how to resolve this issue, your support and time are greatly appreciated.