Estoy tratando de realizar cambios en una matriz en el componente principal (insertar y actualizar datos) que se pasa al componente secundario a través de Props, pero el DOM no se actualiza.
Componente principal:
<UsersList v-for="(role, i) in userRolesNames" :key="i" :users="usersPages[i].data" />Componente hijo:
<template> <div v-for="user in users" :key="user.id" > <span>{{ user.name }}</span> <div> <i class="bi bi-pen-fill edit-icon m-pointer" @click="onClickEdit(user)" ></i> <i class="bi bi-trash-fill delete-icon ms-2 m-pointer" @click="onClickDelete(user)" ></i> </div> </div> </template> <script lang="ts"> // recieving the array props: { users: { required: true, type: Array as PropType<usersType[]> } } </script>Cada usuario tiene básicamente la siguiente estructura:
{ id: x, name: 'x', email: 'x', login: 'x', role: x }El problema es que al intentar insertar o actualizar un registro en la matriz usersPages[i].data, el DOM no cambia. Si uso las herramientas de desarrollo de Vue, los datos cambian correctamente, pero el DOM no.
Intenté insertar usando el método push en la matriz pero sin éxito. Lo único que funcionó fue esto:
const newUser = response.data; const page = this.usersPages[newUser.role - 1]; Vue.set(page, 'data', [...page.data, newUser]);Para actualizar, traté de cambiar directamente las propiedades del usuario, pero al igual que la inserción, el DOM no se actualiza. Lo que funcionó fue:
const page = this.usersPages[user.role - 1]; const oldUsers = page.data.filter(u => u.id != user.id); Vue.set(page, 'data', [ ...oldUsers, response.data ]);Funciona pero no se ve bien... ¿Alguien puede ayudar?
Tuve un problema similar antes. Creo que esto es un error en vue. La razón de esto es que Vue ya representó el v-for . Vue a partir de ahora no sabe cómo manejar los cambios en la matriz. Lo que hice como solución para esto es tener una variable updateKey dentro de mi secuencia de comandos configurada en 0. Luego, incremente esta variable cada vez que actualicemos la matriz updateKey++ . Y usamos esta clave para nuestro componente.
En el componente secundario,
<template> <span v-for="user in users" :key="user.id" > <div :key="updateKey"> <span>{{ user.name }}</span> <div> <I class="bi bi-pen-fill edit-icon m-pointer" @click="onClickEdit(user)" ></i> <I class="bi bi-trash-fill delete-icon ms-2 m-pointer" @click="onClickDelete(user)" ></i> </div> </div> </span> </template> y onClickEdit(user) y onClickDelete(user) asegúrese de tener updateKey++
El DOM no se actualizará porque no lo está haciendo de forma reactiva. Para actualizar este valor de forma reactiva, debe escuchar algún evento ( input , por ejemplo), que emitirá en el componente secundario y pasará el valor nuevo (!) a su propiedad. Pero una mejor manera es vincular sus componentes a través v-model .
PD: para que pueda ver los cambios en las herramientas de desarrollo porque esto no es parte del ciclo de vida de Vue, es como un analizador que observa datos reales, pero sin contexto.
Decidí crear un ejemplo para mostrarle a @peperoneen cómo lo hice, ya que creía que la forma era la correcta. Pero en el ejemplo en sí, funcionó y en mi proyecto no, y la única diferencia fue la forma en que se llenó inicialmente la lista.
Para cargar los usuarios, hago una solicitud a la API que devolvió los datos paginados, que normalmente asigné con el operador '='. Sin embargo, decidí hacer la tarea paso a paso y en la parte de los usuarios usé el método 'push'. De esta forma, las operaciones con la lista usando push y filter funcionan normalmente, actualizando el DOM y sin necesidad de usar Vue.set
Creo que el problema fue la forma en que se generó la lista. No lo estaba haciendo reactivamente, supongo...