Estoy usando un bucle v-for en la plantilla, pero aunque el bucle v-for alimenta todos los elementos con el mismo objeto de datos userCollections , solo aquellos desde los que llamo a la función obtienen sus longitudes y elementos actualizados. Estoy representando un botón en cada elemento para llamar a la función. En resumen, la siguiente línea actualiza la matriz PERO solo el único elemento dentro del bucle v-for que llama a la función. Todos comienzan con la misma matriz global, pero luego, cuando agrego más elementos a esa matriz (desde dentro de cada elemento), es como si cada elemento tuviera su propia matriz userCollections , aunque estoy actualizando el objeto de datos Vue "global". : userCollections ...
this.userCollections.push({id: doc.id, ...doc.data()})Mi plantilla:
<div v-for="(col, index) in userCollections" :id="col.id" :ref="col.id" class="collRow" @click="addToCollection($event, col.id)"> <p >{{col.name}} </p> <p v-if="col.shortDescription">{{col.shortDescription}}</p> <button @click=refreshUserColl(userAddress)>refresh</button> </div>Como se indica en la documentación de Vue, Vue no puede detectar algunos cambios en las matrices: https://v2.vuejs.org/v2/guide/reactivity.html?redirect=true#For-Arrays Supongo que esta es la raíz de mi problema , así que estoy tratando de usar una solución alternativa sugerida en el enlace. Estoy usando un bucle forEach y estoy luchando por obtener la sintaxis correcta. Mi código:
async refreshUserColl(userAddress) { let vm = this let collsRefs = collection(db, "users", userAddress, 'Collections'); // getting data from Google Firestore const qSnap = await getDocs(collsRefs); this.userCollections = [] qSnap.docs.forEach((doc) =>{ console.log(this) this.set(vm.userCollections.push({id: doc.id, ...doc.data()})) <--- problem }) } observe this.SET(vm.userCollections...) que básicamente soy yo tratando sin rodeos de traducir las instrucciones en la documentación de Vue Vue.set(vm.items, indexOfItem, newValue)
Cualquier ayuda sería muy apreciada.