tenga en cuenta que pasé las últimas 2 horas buscando en temas similares de SO para llegar a una solución, pero fallé. Por eso te pido ahora ayuda.
Estoy tratando de lograr lo siguiente:
Tengo un marcador con algunos resultados, que debería verse así:
Tengo una matriz para esto llamada scoreBoardArray .
data() { return { scoreBoardArray: [ { id: '1', name: 'John Doe', pts: 100 }, { id: '2', name: 'John Smith', pts: 50 }, ], } },Puedo recorrerlo, pero no lo hago exactamente 5 veces y escupo "Sin nombre", cuando no se encuentra ningún registro.
Mi código (y mis intentos de resolver el problema):
<ul> <li v-for="item in scoreBoardArray" :key="item.id"> <span v-if="item.id">{{ item.name }} {{ item.pts }}</span> <span v-if="!item.id">No Name</span </li> </ul> por supuesto, he tratado de resolver el problema con el uso de una propiedad computed y un bucle simple for(let i=0; i<6; i++) {...} pero de alguna manera no puedo hacerlo funcionar.
Claro, esto es algo que podría lograr con una propiedad calculada.
Intente simplemente agregar algunos objetos vacíos al final de su matriz para completarla con 5 valores.
computed: { scoreboard() { let append = [] const appendCount = 5 - this.scoreBoardArray for (let i = 0; i < appendCount; i++) { append[i] = {} } return [...this.scoreBoardArray, ...append] } } Pero dado que estos objetos están vacíos, encontrará problemas con las teclas de bucle v-for . Para solucionarlo, podría usar índices como claves:
<li v-for="(item, index) in scoreboard" :key="index">Podría usar una propiedad calculada para dividir los primeros 5 elementos en scoreBoardArray scoreBoardArray[] y obtener la cantidad de elementos ficticios "No Name" necesarios (llamados topScores y dummyLength , respectivamente):
export default { computed: { topScores() { return this.scoreBoardArray .slice() // create a copy .sort((a,b) => b.pts - a.pts) // sort by points .slice(0, 5) // first 5 }, dummyLength() { return Math.max(0, 5 - this.topScores.length) } } } Y actualice la plantilla para representar los accesorios calculados en un v-for , representando los elementos topScores y luego los elementos ficticios dummyLength :
<ul> <li v-for="item in topScores" :key="item.id"> <span>{{ item.name }} ({{ item.pts }})</span> </li> <li v-for="n in dummyLength">No Name</li> </ul>