Vue.js и Firestore заменяют массив при изменении БД

Question

Я использую Vue.js и Firestore.У меня есть несколько кнопок, которые являются динамическими.

Когда я редактирую кнопку и нажимаю изменения в БД, она добавляет к моему массиву вместо ее замены.

Если я обновляю страницу, все работает правильно.

Я предполагаю, что есть способ сделать массив реактивным

, вот мой код:

<template>
  <v-app id="app">
    <Navbar />
    <router-view :key="$route.fullPath"></router-view>
    <v-speed-dial
      v-model="fab"
      fixed
      bottom
      right
      direction="top"
      transition="scale-transition"
    >
      <v-btn
        slot="activator"
        v-model="fab"
        color="blue-grey darken-2"
        dark
        fab
      >
        <v-icon>directions_run</v-icon>
        <v-icon>close</v-icon>
      </v-btn>
      <span v-for="tag in tags" :key="tag.icon">
        <v-btn
        fab
        dark
        small
        :color="tag.color"
        >
          <v-icon>{{tag.icon}}</v-icon>
        </v-btn>
      </span> 
    </v-speed-dial>
  </v-app>
</template>

<script>
import Navbar from '@/components/layout/Navbar'
import db from '@/firebase/init'

export default {
  name: 'App',
  data() {
    return {
      fab: false,
      tags: []
    }
  },
  components: {
    Navbar: Navbar
  },
  created() {
    let tagRef = db.collection('tags').orderBy('order')
    tagRef.onSnapshot(snapshot => {
        snapshot.docChanges().forEach(snap => {
          let tag = snap.doc
          this.tags.push(tag.data())
        })
    })
  }
}
</script>

Answer 1

У вас есть два пути.Первое: найдите и замените свой устаревший тег.Или очистите массив и заново добавьте все элементы с новым.

Второй способ может выглядеть так:

 created() {
 let self = this// you can't use "this" inside onSnapshot
    let tagRef = db.collection('tags').orderBy('order')
    tagRef.onSnapshot(snapshot => {
     self.tags.length = 0
          snapshot.forEach(snap => {
          self.tags.push(tag.data())
        })
    })
  }