I'm working with BootstrapVue.
I have a json which is structured like this (called json in the complete question)
[
{"ID": "1", "Name": "Harry", "Age": "18"},
{"ID": "2", "Name": "Ron", "Age": "18"},
{"ID": "3", "Name": "Hermione", "Age": "18"},
{"ID": "4", "Name": "Ginny", "Age": "18"},
{"ID": "5", "Name": "Fred", "Age": "18"},
]
In my template I show it like following in my <b-form-select> :
<b-form-select class="showPointer">
<option v-for="item in json" :key="item.id">
ID: {{ item.id}}, Name: {{ item.name}}, Age: {{ item.age}}
</option>
</b-form-select>
Now to my problem: I want to sort it based on my name and I know that I have to put it first into a computed-function but I don't know how..
But I want to display it in my template like in my example above (ID, than Name, than Age).
Thanks for your help! Thank You!
You don't need computed for this.
You could sort it immediately after you receive the request response.
Example
get(....).then(response=> {
this.json = response.sort((a,b) => a.name - b.name)
})
Abregre is right, you don't need computed for this.
But in any case, you can use computed like this:
<option v-for="item in sortedJson" :key="item.id">
computed: {
sortedJson () {
return this.json.sort((a, b) => a.Name - b.Name)
}
}