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())
        })
    })
  }

Vue.js和Firestore在数据库更改时替换阵列

1 个答案: