Estoy tratando de ordenar un objeto en un bucle v-for anidado antes de renderizar. He resuelto la clasificación, y cuando lo registro en la consola, puedo ver que está funcionando, pero cuando devuelvo el objeto, chips , recibo una advertencia:
[Vue warn]: You may have an infinite update loop in a component render function.
Si creo una copia del objeto, la clasifico y devuelvo chipsCopy , funciona bien y no hay ninguna advertencia. Genial, pero esto parece innecesariamente redundante. ¿Hay algo que pueda hacer para no tener que hacer la copia y no alterar el renderizado de Vue?
El Vue:
<div v-for="attachment in attachments" :key="attachment.attachment" :sort-by="attachment.attachmentDescription"> <div>{{ attachment.attachment }}</div> <div>{{ attachment.attachmentDescription }}</div> <div v-for="(corsp, indx) in alphaOrder(attachment.correspondenceTemplateList)" :key="`${indx}-${attachment.attachment}-${corsp.categoryCode}-${corsp.letterCode}-${corsp.orgCode}`"> <v-chip @click="gotoLetter(corsp.letterCode,corsp.orgCode)"> {{ corsp.letterCode }}-{{ corsp.orgCode }} </v-chip> </div> </div>El JS:
methods: { alphaOrder(chips) { // Must create a copy of the object or Vue warns of an infinite loop rendering error. const chipsCopy = chips.map(c => ({ ...c, })); function compare(a, b) { var chipA = a.letterCode + "-" + a.orgCode; var chipB = b.letterCode + "-" + b.orgCode; if (chipA < chipB){ return -1; } if (chipA > chipB){ return 1; } return 0; } return chipsCopy.sort(compare); }, },sort modifica la matriz en su lugar . Si no crea una copia de la matriz primero, estará mutando los datos locales durante el procesamiento, lo que no está permitido (de ahí la advertencia de bucle de actualización infinita).
Puede copiar superficialmente la matriz de esta manera al final del método antes de ordenar:
return chips.slice().sort(compare)Sería mejor precalcular esto usando una propiedad calculada para que no tenga que volver a calcular la clasificación cada vez que se actualiza la vista (las propiedades calculadas solo se actualizan cuando es necesario).