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

【问题标题】：Vue js - reload component on database insertVue js - 在数据库插入时重新加载组件
【发布时间】：2019-07-19 22:16:28
【问题描述】：

我有以下设置

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。但是，组件网格不会重新加载。刷新页面会在网格中显示新项目。

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

【问题讨论】：

我希望您在watch 中为reload 调用函数firestore()。
@vahdet 谢谢，我已经尝试过了，但无济于事。无论如何，我至少应该看到手表中的警报被触发。这也不会发生
你的陈述Onsuccessful insert the value changes from false to true让我觉得警报触发成功了，但如果你这么说；先尝试this solution 以immediate 为特色，您可以至少通知警报是否触发。
我决定试试这个解决方案 - stackoverflow.com/a/37521683/732923。使用 refs 从父级本身调用 firestore 方法。它确实完成了这项工作，尽管使用 refs 似乎是一种值得怀疑的方式。

标签： firebase vue.js nuxt.js

【解决方案1】：

在Component.vue 中的firestore 方法中，您正在使用get 方法，根据firestore documentation，它只检索一次数据，它不听任何变化，你会有刷新您的页面以查看更新后的更改。

但是，要侦听 Firestore 数据库的更改并在您的网站上进行相应更新，您必须设置 listener，Cloud 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);
        }
      );
  }

【讨论】：