Hola, estoy tratando de ordenar varios V-Chips por orden alfabético. ¿Alguna idea chicos?
Abajo está el código que estoy tratando de mostrar todos mis v-chips ordenados alfabéticamente. ¿Debe ordenarse mi matriz o hay alguna propiedad en vuetify que haga el trabajo? Cualquier ayuda sería apreciada
<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>Simplemente puede lograrlo usando el método Array.sort() . Puede ordenar en gancho de ciclo de vida montado () o directamente en la plantilla dentro de la directiva v-for .
demostración:
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>Clasificarlo directamente en el componente resultó en un bucle de actualización infinito en la función de renderizado para mí. Esto lo resuelve:
<v-chip-group active-class="primary--text" column> <v-chip v-for="tag in [...tags].sort()" :key="tag"> {{ tag }} </v-chip> </v-chip-group>Yo personalmente usaría una propiedad computed para ordenar los datos.
Luego, la lógica de la función de clasificación se separará de la plantilla y, si tiene un objeto más complejo con un método de clasificación más complejo, sería más legible.
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>