我正在更新数据库中的信息,并且我希望该数据更新我用来显示实时数据的卡。这很好用,但是当我对数据库进行更改时,我用来显示信息的卡在每次更改时都重复。
我希望它替换/更新我要显示的卡,但是它会制作一张新卡,并将其与所有旧卡一起添加到屏幕上,每次更改。
Vue和Firebase的新手似乎无法使其正常工作。
<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卡,而不是用新数据替换。
我正在更新数据库中的信息,并且我希望该数据更新我用来显示实时数据的卡。这可以正常工作,但是当我更改数据库卡时,我就是...
这是因为每次将文档添加到集合时,侦听器都会收到该集合的整个文档集