Estoy creando una tabla con alpinejs, debería devolver una nueva fila si alguien presiona el enlace "hacer clic para agregar"
tengo este codigo:
<div class="mt-2" x-data="services()"> <tbody class="bg-gray-200" x-model="newService" x-show="services.length"> <template x-for="service in services" :key="service.id"> <td x-text="services.length" > <a @click="addService()">Click to add more</a> <script> function services() { return { services: [], , newService: '', addService() { this.services.push({ id: this.services.length + 1, body: this.newService, completed: false }); this.newService = ''; }, deleteService(service){ let position = this.services.indexOf(service); this.services.splice(position, 1); } } } </script>¡pero en lugar de devolver una nueva fila, devuelve 23 filas a la vez!
¿Cómo puedo arreglar eso?
Agregando a la respuesta existente, aquí hay un ejemplo de trabajo simple.
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> <script src="//unpkg.com/alpinejs" defer></script> <div class="mt-4 flex flex-col max-w-lg mx-auto" x-data="services()"> <div class="flex space-x-2"> <input type="text" x-model="newService" class="px-2 py-1 border flex-1 rounded" placeholder="Service"> <button class="border bg-blue-600 hover:bg-blue-700 text-white rounded px-4 py-1" @click="addService()">Add service</button> </div> <div x-show="services.length"> <div class="rounded border mt-4 text-xs"> <table class="w-full"> <thead> <tr> <th class="bg-gray-100 font-normal text-gray-500 uppercase py-2">Services</th> </tr> </thead> <tbody> <template x-for="service in services" :key="service.id"> <tr class="border-t"> <td class="flex justify-between items-center px-4 py-1"> <span x-text="service.body"></span> <button class="text-sm uppercase text-red-500 px-2 py-1 rounded hover:bg-red-100" @click="deleteService(service.id)">x</button> </td> </template> </tbody> </table> </div> <button class="text-xs w-full mt-2 bg-red-100 text-red-400 px-2 py-2 rounded hover:bg-red-200" @click="services = []">Delete All</button> </div> </div> <script> function services() { return { services: [{ id: 1, body: 'Service 1', completed: false }, { id: 2, body: 'Service 2', completed: false } ], newService: '', addService() { if (this.newService.length < 1) return; this.services.push({ id: Date.now(), body: this.newService, completed: false }); this.newService = ''; }, deleteService(serviceId) { let position = this.services.findIndex(el => el.id == serviceId); this.services.splice(position, 1); } } } </script>Con un código limitado y sin un ejemplo de trabajo, es un poco difícil dar una respuesta concreta. Al mirar el código, creo que está obteniendo la cantidad existente de filas en el cuerpo de su tabla.
addService() { this.services.push({ id: this.services.length + 1, body: this.newService, completed: false }); this.newService = ''; } En este método, está seleccionando this.newService como su cuerpo. Y mirando su HTML <tbody class="bg-gray-200" x-model="newService" x-show="services.length"> newService es el cuerpo completo de la tabla existente.
Entonces obtienes las 23 filas existentes.