Firestore onSnapshot дублирует все элементы DOM вместо их замены / обновления - PullRequest
Новая
       44

Firestore onSnapshot дублирует все элементы DOM вместо их замены / обновления

0 голосов
/ 07 октября 2019

Я обновляю информацию в своей базе данных и хочу, чтобы эти данные обновляли карты, которые я использую для отображения данных RealTime. Это работает нормально, но когда я вносю изменения в базу данных, карты, которые я использую для отображения информации, просто дублируют каждое внесенное изменение.

Я хочу заменить / обновить карты, которые я отображаю, но он создает новую карту и добавляет ее на экран вместе со всеми старыми картами при каждом изменении.

Довольно новый для 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>

Дублирует виртуальные карты вместо замены новыми данными.

1 Ответ

2 голосов
/ 07 октября 2019

Это потому, что каждый раз, когда документ добавляется в коллекцию, слушатель получает весь набор документов коллекции, и вы помещаете эти документы в массив users без повторной инициализациимассив .

. Вы можете убедиться в этом, добавив console.log() следующим образом, который будет регистрировать размер снимка: 

   employeeRef.onSnapshot(snap => {
      console.log(snap.size);  <-- Add here
      snap.forEach(doc => {...})
      //...
   });

Вы можете повторно инициализировать массив пользователей каждыйвремя срабатывания прослушивателя: 

   employeeRef.onSnapshot(snap => {
      this.users = [];  <-- re-initialize the array
      snap.forEach(doc => {...})
      //.....
   });

Но есть лучшее решение, как описано в doc : анализировать "фактические изменения результатов запроса между моментальными снимками запроса".

Например, для перехвата только тех документов, которые добавлены в собрание, вы должны сделать следующее: 

  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);
        }
      });
    });
  }
...