¿Cuál es la forma correcta de inyectar una parte de html que tiene etiquetas sin cerrar?
Uso el módulo en x-if para determinar cuándo cerrar la fila y comenzar una nueva.
Este código no funciona ya que la plantilla div se cierra inmediatamente.
<template x-if="rowCount % 10 === 0"> <div> <!-- HTML to inject--> </div><div class="m-0 flex justify-between"> </div> </template>La forma correcta es dividir los datos de entrada en la forma requerida y luego usar dos bucles. Usando este método no tenemos que lidiar con etiquetas no cerradas y el código es más legible.
<script src="https://unpkg.com/alpinejs@3.xx/dist/cdn.min.js"></script> <script> function partition_array(input, amount) { let output = []; for (let i=0; i < input.length; i += amount) { output[output.length] = input.slice(i, i + amount); } return output; } </script> <div x-data="{array_of_arrays: partition_array([...Array(9).keys()], 3)}"> <div> <template x-for="array in array_of_arrays"> <div> <template x-for="item in array"> <span x-text="`${item} `"></span> </template> </div> </template> </div> </div>