Question

我有以下设置

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

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

Answer 1

在firestore的{{1}}方法中，您使用的是Component.vue方法，根据Firestore documentation，该方法仅检索一次数据，不监听进行任何更改，您都必须刷新页面才能查看更新的更改。

但是，要侦听对Firestore数据库的更改并在您的网站上进行相应的更新，您必须设置listener，Cloud Firestore会向侦听器发送数据的初始快照，然后在每次文件变更。

get

Vue JS-在数据库插入上重新加载组件

1 个答案: