Data chunking / Data splitting
Lo que buscas es lo que normalmente llamamos "chunking", fraccionar un conjunto de datos en conjuntos más pequeños (chunks). También hay quienes le llaman split o splitting.
Primero, si noticias
fuera un array como
[
"noticia 1",
"noticia 2",
"noticia 3",
"noticia 4",
"noticia 5",
...
]
Conviértelo a un array de arrays, estilo.
[
["noticia 1", "noticia 2"],
["noticia 3", "noticia 4"],
["noticia 5"]
]
Si cargar más
realiza alguna petición a alguna API o lo que sea que te de otro array normal, simplemente divide los datos adicionales a su vez en chunks y agrégalos, teniendo en cuenta que el último chunk puede tener todavía un hueco libre.
Cómo partir arrays en subcojuntos (chunks) regulares
Te dejo una función sencillita
function chunk(array, size) {
const chunks = []
for(let i = 0; i < array.length; i += size) {
chunks.push(array.slice(i, i+size))
}
return chunks
}
Para convertir tus noticias
a chunks (omitiendo temas de tipado, no sé si usas TypeScript)
noticias = chunk(noticias, 2)
Si de casualidad utilizas alguna librería para tratamiendo de datos como lodash, estas suelen traer ya este función, o alguna similar.
Con conjuntos irregulares hace falta un poco más
Si quieres tener chunks de 2 y 3 de forma controlada, tendrás que hacerte un algoritmo custom. Puedes partir del sugerido y añadirle alguna modificación. Por ejemplo, en lugar de un size fijo, podrías tener un conjunto de size que aplicarse en orden (y cíclicamente)
Función ejemplo para partir en 2, 2, 3 y 3
function variableChunks(array, sizes) {
const chunks = []
let sizeIndex = 0
let i = 0;
while(i < array.length) {
chunks.push(array.slice(i, i+sizes[sizeIndex]))
i += sizes[sizeIndex]
sizeIndex = (sizeIndex + 1) % sizes.length
}
return chunks
}
const noticias = ["n1", "n2", "n3", "n4", "n5", "n6", "n7", "n8", "n9", "n10", "n11", "n12", "n13", "n14"]
console.log(variableChunks(noticias, [2,2,3,3]))
NOTA: te lo dejo con while porque es más fácil de ver la actualización de variables en cada vuelta. A tu gusto.
Como ves es cíclico según el array de sizes pasado. Los dos primeros chunks tendrán tamaño 2, los dos siguientes tamaño 3, los dos siguientes volverán a tamaño 2, etc...
Renderizado de los chunks en Vue
Veo que le estás dando una definición espacial a los chunks, y los entiendes como filas (rows), algo habitual y completamente correcto. Podrías recorrer el array de filas con un for, y con un for interno recorrer cada una de las noticias del chunk.
<div class="row" v-for="row in noticias">
<div class="noticia" v-for="noticia in row">
{{noticia}}
</div>
</div>
NOTA: usando div porque no sé qué semántica estás usando. Típicamente para una noticia se puede utilizar <article>
. Si no quieres ninguna etiqueta (ni div, ni article, solo el texto plano como sugieres) puedes usar la etiqueta <template>
que no aparecerá en el resultado final.
NOTA 2: dependiendo tu versión de Vue y de la forma de tus datos, su orden y frecuencia de actualización, puede ser conveniente usar la directiva :key en v-for.
IMPORTANTE Consejo adicional: considera solo CSS
En algunas ocasiones, para mostrar murales de noticias con distintos tamaños y disposiciones, no es siquiera necesario modificar la estructura de los datos en el html (DOM) ni en los datos lógicos, y es una cuestión de representación con CSS. Si realmente no necesitas estructurar los datos y solo buscas un layout, quizás te interese simplemente tener todas las noticias seguidas y modificar su disposición con CSS. display: grid es muy útil para ello, pero también puede hacerse de maneras tradicionales con el pseudoselector nth-of-type o nth-child.
v-for="item,index in noticias"
y segmentar los bloques con 10 items cada uno. No tengo idea como encararlo.[[1,2], [3,4], [5,6,7], [8,9,10]]
. Despues es tan simple como hacer 2v-for
, el primero para recorrer los "grupos" y el segundo para las "noticias en el grupo"