Firebase Vue js-在数据库插入时重新加载组件

我有以下设置

Component.vue在主页中将数据库集合显示为网格

...
      <v-flex v-for="i in items" :key="i.id" xs6 sm3 md3>
        <v-card color="primary">
          <v-card-text>
            <h2 
              class="font-weight-regular mb-4"
            >
              {{ i.description }}
            </h2>
          </v-card-text>
        </v-card>
      </v-flex>
...

<script>
import { db } from '~/plugins/firebase.js'

export default {
  data: () => ({
    items: []
  }),
  props: ['reload'],
  watch: {
    reload: function (newVal, oldVal) {
      this.items = items
      alert('changed reload')
    }
  },
  methods: {
    firestore() {
      db.collection('items')
        .get()
        .then(querySnapshot => {
          const items = []
          querySnapshot.forEach(function(doc) {
            const item = doc.data()
            item.id = doc.id
            items.push(useritem)
          })

          this.items = items
        })
        .catch(function(error) {
          alert('Error getting documents: ' + error)
        })
    }
  }
}
</script>

index.vue主页面，其中包含用于添加新集合的网格组件和按钮

....
    <v-layout mb-4>
      <v-btn 
        @click="submit"
      >
        Add Item
      </v-btn>
    </v-layout>
    <v-layout mb-4>
      <component :reload="reload" />
    </v-layout>
....

<script>
import { db } from '~/plugins/firebase.js'
import component from '~/components/Component.vue'
import moment from 'moment'

export default {
  components: {
    component
  },
  data() {
    return {
      description: 'test',
      date: moment(),
      reload: false
    }
  },
  methods: {
    submit() {
      db.collection('items')
        .add({
          description: this.description,
          deadline: new Date(moment(this.date)),
          status: true
        })
        .then(docRef => {
          this.reload = true
        })
        .catch(error => {
          alert('Error adding document: ', error)
        })
    }
  }
}
</script>

可以看出，我已经向组件添加了一个道具，每当使用按钮在主页上添加新项目时，都会触发从数据库重新加载数据

成功插入后，值将从false更改为true。但是，零部件网格不会重新加载。刷新页面将在网格中显示新项

如何使组件响应或在添加新项目时触发重新加载？

在component.vue中的firestore方法中，您使用的是get方法，根据firestore，该方法只检索数据一次，它不会侦听任何更改，您必须刷新页面才能查看更新的更改

但是，要监听firestore数据库的更改并在网站上进行相应更新，您必须设置云，firestore会向侦听器发送数据的初始快照，然后在每次文档更改时发送另一个快照

methods: {
    firestore() {
      db.collection("items").onSnapshot(
        snapshot => {
          const documents = snapshot.docs.map(doc => {
            const item = doc.data();
            item.id = doc.id;
            return item;
          });
          this.items = documents;
        },
        error => {
          // handle errors
          alert("Error getting documents: " + error);
        }
      );
  }

---

我希望你调用手表中的firestore函数重新加载。@vahdet谢谢，我已经试过了，但没有用。在任何情况下，我至少应该看到手表中的警报被触发。如果您关于成功插入的声明值从false变为true，则我认为警报已成功触发，但如果您这样说；首先尝试使用“立即”功能，您至少可以通知警报是否触发。我决定尝试一下此解决方案-。使用refs从父对象本身调用firestore方法。它确实起到了作用，尽管使用refs似乎是一种值得怀疑的方式。