Estoy usando Quasar y Vue.js para crear un formulario donde puedo agregar objetos en una matriz para que puedan insertarse en la base de datos al mismo tiempo, pero cada vez que agrego o elimino un objeto de esta matriz, solo se actualiza después Me enfoco en cualquier otra entrada en el formulario, está agregando y eliminando los objetos de la matriz como debería, pero no se muestra en la pantalla a menos que me concentre en cualquier otra entrada en el formulario, siga el código:
<template> <form> <q-input v-model = "eventTitle" label = "Event title" /> <div v-for = "(task, index) in tasks" :key = "index" > <q-btn label = "Remove Task" @click = "removeTask(index)" /> <q-input v-model = "task.title" label = "Title" /> <q-input v-model = "task.date" label = "Date" /> <q-input v-model = "task.desc" label = "Description" /> </div> <q-btn label = "Add Task" @click = "addTask" /> </form> </template> <script> export default { setup () { const singleTask = { title: '', date: '', desc: '' } var tasks = [] return { tasks, singleTask } }, methods: { addTask() { this.tasks.push(this.singleTask) }, removeTask(index) { this.tasks.splice(index, 1) } } } </script>Y cada vez que edito un campo en un objeto, los demás también se modifican (lo cual es otro problema). Si alguien tiene alguna sugerencia sobre esto, se lo agradeceré porque nunca había visto algo así.
Gracias por las sugerencias y respuestas de antemano.
Múltiples problemas aquí:
singleTask es una instancia de un solo objeto. Empujarlo en la matriz no creará una copia del objeto. Como resultado, su matriz contiene varios elementos: referencias a un objeto que apuntan a un solo objeto. Google para "Valor JS vs referencia" para entender el concepto
Está utilizando setup , pero las estructuras de datos devueltas no son datos reactivos. Necesitas usar ref o reactive
No use el index como key , es lo mismo que no usar key en absoluto. La key debe ser estable, lo que significa que debe "conectar" cualquier objeto único en la matriz iterada a un elemento DOM (o grupo de elementos) creado para él por Vue. El índice no es estable ya que cambia cuando elimina elementos de la matriz
Último consejo: no se recomienda combinar la API de composición y la API de opciones. O usa uno u otro. Excelente nuevo tutorial puede ayudar