Estoy tratando de ordenar una matriz en un v-for (también traté de alinearlo). El problema es que el método de clasificación se llama demasiadas veces y parece infinito.
<div v-for="asset in sortBinaries(props.row.assets)" :key="asset.url"> </div> sortBinaries(binaries) { return binaries.sort((a, b) => this.fieldSorter(a, b, ['arch', 'type'])); }, fieldSorter(a, b, fields) { var dir = [], i, l = fields.length; fields = fields.map(function(o, i) { if (o[0] === "-") { dir[i] = -1; o = o.substring(1); } else { dir[i] = 1; } return o; }); for (i = 0; i < l; i++) { var o = fields[i]; if (a[o] > b[o]) return dir[i]; if (a[o] < b[o]) return -(dir[i]); } return 0; } El v-for está ubicado en una ranura de detalle de una mesa Buefy. Entonces necesito la referencia al objeto props.row .
¿Hay alguna forma de ordenar la matriz cuando se muestra, en lugar de tratar primero todos los datos?
La matriz que estoy clasificando es pequeña (6 entradas como máximo), pero todo el conjunto puede agrandarse.
use calculado en lugar de ordenar en línea
Para bucles infinitos, si usa la ordenación en línea, cada vez que se renderice esta plantilla, se invocará la función de ordenación en línea.
Usar computated para ordenar sus datos es una buena idea. Su plantilla se volverá a representar justo después de que se haya cambiado el cálculo.
<div v-for="asset in sortedBinaries" :key="asset.url"> computed: { sortedBinaries() { return this.row.assets.sort((a, b) => this.fieldSorter(a, b, ['arch', 'type'])); } }