Firestore onSnapshot复制所有DOM元素,而不是替换/更新它们 [英] Firestore onSnapshot duplicates all DOM elements instead of replacing/updating them
问题描述
我正在更新数据库中的信息,并且我希望该数据更新我用来显示实时数据的卡.这可以正常工作,但是当我对数据库进行更改时,我用来显示信息的卡在每次更改时都重复出现.
I am updating the information in my database and I want that data to update the Cards I am using to display the data RealTime. This works fine but when I make a change to the database the cards I am using to display the info just duplicate on every change made.
我希望它替换/更新我要显示的卡,但是它会制作一张新卡,并在每次更改时将其与所有旧卡一起添加到屏幕上.
I Want it to replace/update the Cards I am displaying But it makes a new card and adds it to the screen along with all old cards on every change.
Vue和Firebase的新手似乎无法使其正常工作.
Pretty new to Vue and Firebase cant seem to get it to work.
<template>
<v-flex xs12 sm6 md4 lg3 xlg3 v-for="user in users" :key="user.id">
<v-card raised :class="`${user.Status} text-xs-center ma-3`" >
<v-responsive align="middle" class="pt-4">
<v-icon :class=" `${user.Status} ma-n1 mb-n1`" size="55px" >account_box</v-icon>
</v-responsive>
<v-card-text>
<div align="middle" class="subheading White">{{user.Name}}</div>
<div align="middle" class="grey--text ma-1">
<v-chip color="" small ripple :class="`${user.Status} caption my-3`"><div class="White mr-2">Status: </div><div :class="`${user.Status}`"> {{user.Status}}</div> </v-chip>
</div>
<v-divider></v-divider>
<div align="middle" class="White ma-1">Unit: {{user.GroupHex}} - {{user.UserIDInt}} </div>
<div align="middle" class="grey--text mt-3">Last Message:<div class="Green">{{user.TimeStamp}}</div></div>
</v-card-text>
<v-card-actions raised align="center">
<v-spacer></v-spacer>
<router-link class="noLink" :to="{ path: '/Logs'}" append>
<v-btn color=" " small align="middle" flat class="" >
<v-icon color="grey" class="mr-2">assessment</v-icon>
<span>Log Data</span>
</v-btn>
</router-link>
<v-spacer></v-spacer>
</v-card-actions>
</v-card>
</v-flex>
</v-layout>
<NewEmployee />
</v-container>
</v-app>
</template>
<script>
import firestore from "firestore";
// eslint-disable-next-line
import EmployeePop from "@/components/updatePopups/EmployeePop";
import NewEmployee from "@/components/updatePopups/NewEmployee";
import db from "@/components/fbInit";
import firebase from "firebase";
export default {
// eslint-disable-next-line
components: {EmployeePop, NewEmployee},
data() {
return {
users: [],
links: [
{ route: "/logs" },
]
};
},
created() {
var user = firebase.auth().currentUser;
var employeeRef = db.collection('userProfiles').doc(user.uid).collection('employees')
employeeRef.onSnapshot(snap => {
snap.forEach(doc => {
const data = {
id: doc.id,
Name: doc.data().Name,
GroupHex: doc.data().GroupHex,
UserIDInt: doc.data().UserIDInt,
SuperID: doc.data().SuperID,
misc: doc.data().misc,
Status: doc.data().Status,
TimeStamp: doc.data().TimeStamp,
Original: doc.data().Original
}
this.users.push(data);
});
})
},
</script>
复制v卡,而不是替换新数据.
Duplicates v-cards instead of replacing with new data.
推荐答案
这是因为每次将文档添加到集合时,侦听器都会收到该集合的整个文档集,然后您将其推送这些文档发送到 users
数组,而无需重新初始化数组.
This is because each time a document is added to the collection the listener receives the entire set of documents of the collection and you push those documents to the users
array without re-initializing the array.
您可以通过添加以下 console.log()
来进行验证,该操作将记录快照的大小:
You can verify that by adding a console.log()
as follows, which will log the snapshot's size:
employeeRef.onSnapshot(snap => {
console.log(snap.size); <-- Add here
snap.forEach(doc => {...})
//...
});
您可以在每次触发侦听器时重新初始化users数组,如下所示:
You could re-initialize the users array each time the listener is triggered, as follows:
employeeRef.onSnapshot(snap => {
this.users = []; <-- re-initialize the array
snap.forEach(doc => {...})
//.....
});
但是,有一个更好的解决方案,如 doc :分析查询快照之间查询结果的实际变化".
But there is a better solution, as explained in the doc: to analyse "the actual changes to query results between query snapshots".
例如,要仅捕获添加到集合中的文档,请执行以下操作:
For example, for catching only the documents that are added to the collection, you would do as follows:
created() {
const user = firebase.auth().currentUser;
const employeeRef = db.collection('userProfiles').doc(user.uid).collection('employees')
employeeRef.onSnapshot(snap => {
snap.docChanges().forEach(change => {
if (change.type === "added") {
const data = {
id: change.doc.id,
Name: change.doc.data().Name,
....
};
this.users.push(data);
}
});
});
}
这篇关于Firestore onSnapshot复制所有DOM元素,而不是替换/更新它们的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!