props: { groups: Array, }, computed: { groups: function(arr) { alert('hi') } }, <div v-for="(item, index) in groups" :key="item.id" :id="item.id" class="group-name" @click="isOnlySelected ? null : $emit('setSelectedItem', item.id)"> </div>¿Cómo reorganizar la posición de la matriz proveniente de la API en la interfaz?
Puedo mostrar todo el valor desde api hasta frontend. Pero necesito agregar alguna condición como para ordenar el valor de la matriz. ejemplo (necesito cambiar la posición de matriz [6] a la posición de matriz [1].
una opción sería usar una propiedad calculada que clasifique/intercambie su matriz. Luego, usa esa propiedad calculada en su v-for.
computed: { rearrangeDataset () { if (Array.isArray(this.dataset) && this.dataset.length) { // Do your sorting or swapping. Always return a value in a computed property. let tmp = this.dataset[2] this.dataset[2] = this.dataset[0] this.dataset[0] = tmp return this.dataset } else { return [] } } }Luego usa esto calculado en tu v-for:
<div v-for="(item, index) in rearrangeDataset" :key="item.id" :id="item.id" class="group-name" @click="isOnlySelected ? null : $emit('setSelectedItem', item.id)"> </div>Veo que usa este conjunto de datos en un controlador (su ID), por lo que creo que es mejor mutar su conjunto de datos en una propiedad computada y devolver ese mismo conjunto de datos.
Creé un ejemplo en codepen para usted: https://codepen.io/LucasFer/pen/oNewOwv
Tenga en cuenta que también puede abordar esto con watch .