0
456
VistasVue.js: ¿por qué no puedo eliminar todos los elementos de una matriz?
Obtuve un componente principal (un formulario) dividido en componentes secundarios para manejar diferentes tipos de datos de entrada. Los datos se rellenan previamente desde una API. Si un usuario hace una nueva selección o cambia algunos datos en los componentes secundarios, quiero enviarlos al componente principal para poder usarlos en un evento de envío de formulario y pasar estos nuevos datos a la base de datos/API.
La lógica anterior funciona en las actualizaciones, sin embargo, si el usuario desea eliminar un elemento (seleccionando el botón "X" en la captura de pantalla que se muestra a continuación), también necesito actualizar la matriz de resultados del formulario y no incluir el elemento "eliminado". La matriz de resultados del formulario funciona, pero por alguna razón no puedo eliminar las tarjetas de la interfaz de usuario:
El componente principal pasa las propiedades de valor del formulario al elemento secundario y el elemento secundario emite las actualizaciones de respaldo al elemento principal:
<ISOAdminDivForm /> <ISOAdminDivFormName /> <ISOAdminDivFormNameItem />¿Alguien puede ver mi demostración de codesandbox y ayudarme a descubrir por qué no puedo eliminar dinámicamente las "tarjetas" de la interfaz de usuario?
1 Respuestas
Responde la pregunta0
Me las arreglé para tener algo de trabajo. En realidad, fue más simple de lo que pensé originalmente, ya que incluyó muchos archivos (más de los necesarios para un ejemplo mínimo y reproducible).
Básicamente, se reduce a actualizar correctamente la propiedad de datos divisionLanguages .
Para hacerlo más simple, eliminé los datos de formValues ya que creo que es confuso y redundante con divisionLanguages.data .
Como dije en mis comentarios, para actualizar una lista reactiva en Vue, debe usar Array.splice .
Por lo tanto, su método deleteItem deberá encontrar el índice del elemento para eliminar y luego empalmar la matriz con dicho índice:
deleteItem(id) { const elementIndex = this.divisionLanguages.data.findIndex( (x) => x.P_uniqueID === id ); this.divisionLanguages.data.splice(elementIndex, 1); this.$emit("languages", this.divisionLanguages.data); }Aquí está la caja de arena bifurcada: https://codesandbox.io/s/foundation-form-names-forked-b7sy2?file=/src/components/ISOAdminDivFormName.vue