Al eliminar un elemento de una matriz de referencia en Vue, elimina el correcto en el lado JS de las cosas, sin embargo, en el DOM, eliminó el último de la lista. No tengo idea de por qué elimina el elemento incorrecto.
Por ejemplo :
const ar = ref([A, B, C]); Cuando elimino B y registro esa eliminación, obtengo una matriz [A, C]. Sin embargo, en mi aplicación web, los elementos representados tienen los valores de [A, B] en lugar de [A, C]. He usado diferentes formas de eliminar elementos de una matriz, la que funcionó mejor es obviamente el splice , pero como dije, mi componente representa los elementos [A, B] en lugar de [A, C].
Este es el código:
// I create a dynamic array from a v-model, with some minor transformation. const inputRef = ref( props.modelValue.map((val) => ({ ...val, value: val.end - val.start })) ); // This callback is triggered when pressing the delete button in my DOM component. const removeValue = (index) => { inputRef.value.splice(index, 1); };Así es como renderizo la matriz en mi DOM:
<div v-for="(item, index) in inputRef" :key="index" class="flex flex-col items-center w-full"> <!-- stuff --> </div>Me cuesta entender por qué el DOM no coincide con la matriz registrada. ¿Es algo que me estoy perdiendo de Vue 3?
Está utilizando el índice como clave, debe reemplazarlo con algo que sea más exclusivo para cada elemento, como en el caso de que los elementos en la matriz sean objetos y luego pueda tener una propiedad de identificación o una propiedad de valor o alguna otra propiedad que sea única para cada elemento deberías ser así
<div v-for="(item, index) in inputRef" :key="item.<some unique property>" class="flex flex-col items-center w-full"> <!-- stuff --> </div>o en caso de que la referencia de entrada considere que el valor de cada elemento es único, entonces su podría ser
<div v-for="(item, index) in inputRef" :key="item.value" class="flex flex-col items-center w-full"> <!-- stuff -->para comprender por qué no debe usar el índice para la clave, puede leer esta sección de documentos de vue