Hey Iam Trying To Sort Multiple V-Chips By Alphabetically. Any idea guys?
Down Below Is the Code Iam Trying To Display all my v-chips alphabetically sorted Should my array be sorted or is there any property in vuetify which does the work done? Any help would be appreciated
<template>
<div class="pa-4">
<v-chip-group
active-class="primary--text"
column
>
<v-chip
v-for="tag in tags"
:key="tag"
>
{{ tag }}
</v-chip>
</v-chip-group>
</div>
</template>
<script>
export default {
data: () => ({
tags: [
'Work',
'Home Improvement',
'Vacation',
'Food',
'Drawers',
'Shopping',
'Art',
'Tech',
'Creative Writing',
],
}),
}
</script>
You can simply achieve it by using Array.sort() method. You can sort either in mounted() lifecycle hook or directly in template itself inside v-for directive.
Demo :
new Vue({
el: '#app',
vuetify: new Vuetify(),
data: () => ({
tags: [
'Work',
'Home Improvement',
'Vacation',
'Food',
'Drawers',
'Shopping',
'Art',
'Tech',
'Creative Writing',
]
})
})<script src="https://unpkg.com/vue@2.x/dist/vue.js"></script>
<script src="https://unpkg.com/vuetify@2.6.4/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/vuetify@2.6.4/dist/vuetify.min.css"/>
<div id="app">
<v-app id="inspire">
<v-chip-group active-class="primary--text" column>
<v-chip v-for="tag in tags.sort()" :key="tag">
{{ tag }}
</v-chip>
</v-chip-group>
</v-app>
</div>Sorting it directly in the component resulted in a infinite update loop in the render function for me. This solves it:
<v-chip-group active-class="primary--text" column>
<v-chip v-for="tag in [...tags].sort()" :key="tag">
{{ tag }}
</v-chip>
</v-chip-group>
I would personnaly use a computed property to sort the data.
Then the logic of the sort function will be separated from the template and if you have more complex object with a more complex sort method that would be more readable.
new Vue({
el: '#app',
vuetify: new Vuetify(),
computed: {
tagsSorted(){
return this.tags.sort()
}
},
data: () => ({
tags: [
'Work',
'Home Improvement',
'Vacation',
'Food',
'Drawers',
'Shopping',
'Art',
'Tech',
'Creative Writing',
]
})
})<script src="https://unpkg.com/vue@2.x/dist/vue.js"></script>
<script src="https://unpkg.com/vuetify@2.6.4/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/vuetify@2.6.4/dist/vuetify.min.css"/>
<div id="app">
<v-app id="inspire">
<v-chip-group active-class="primary--text" column>
<v-chip v-for="tag in tagsSorted" :key="tag">
{{ tag }}
</v-chip>
</v-chip-group>
</v-app>
</div>