在单个 Vue 组件中从 Firestore 获取父和子文档数据

Question

我在 firestore 中有一个父（组织）文档和多个子文档。我想根据父项或子项是否在同一组件中单击来加载数据。

下面的代码有效，显示了数据，但是子组织的更新没有实时显示（我必须重新加载才能看到）。我猜这是因为我绑定的是数组 orgArray 而不是我实际用来显示数据的对象 org 。有没有办法只绑定对象而不是整个数组？

<template>
    <div class="route-container">
        <div class="item__container">
            <FmisTitle/>

            <Hero
              :orgName="org.name"
              :orgLogo="org.logo"
              :orgState="org.state"
              :orgNumber="org.number"
              :orgType="org.type"
              :orgDateStart="org.dateStart"
              :orgDateEnd="org.dateEnd"
              :orgDateStartF="org.dateStartFunctional"
              :orgDateEndF="org.dateEndFunctional"
              :orgCoverImage="org.coverImagex745"
              :childRef="org.id"
              :orgRef="orgRef"
            />

            <Contact
              :orgEmail="org.email"
              :orgPhone="org.phoneNumber"
              :orgAddress="org.address"
              :orgWebsite="org.website"
              :orgSocials="org.socials"
              :childRef="org.id"
              :orgRef="orgRef"
            />

            <ButtonDuo/>
        </div>
    </div>
</template>

export default {
  data() {
    return {
      org: {},
      orgArray: [],
      orgRef: '',
    };
  },
created() {
    firebase.auth().onAuthStateChanged((user) => {
      firestore.collectionGroup('people').where('userId', '==', user.uid).get().then((query) => {
        query.forEach((userRef) => {
          const orgRef = userRef.ref.parent.parent.id;
          this.orgRef = orgRef;
          if (!this.$route.params.parent) {
            const organisation = firestore.collection('organisations').doc(orgRef).collection('childOrganisations').where('name', '==', this.$route.params.id);
            this.$bind('orgArray', organisation).then((doc) => {
              const org = doc[0];
              this.org = org;
            });
          } else {
            const organisation = firestore.collection('organisations').doc(orgRef);
            this.$bind('org', organisation);
          }
        });
      });
    }, (error) => {
      console.log(error);
    });
  },
}

Answer 1

我通过使用 childOrg 的 id 并获取具有该 id 的数据解决了这个问题，这样我就可以直接绑定数据对象。

firebase.auth().onAuthStateChanged((user) => {
      firestore.collectionGroup('people').where('userId', '==', user.uid).get().then((query) => {
        query.forEach((userRef) => {
          const orgRef = userRef.ref.parent.parent.id;
          this.orgRef = orgRef;
          if (this.$route.query.parent !== 'true') {
            firestore.collection('organisations').doc(orgRef).collection('childOrganisations').where('name', '==', this.$route.params.id)
              .get()
              .then((q) => {
                q.forEach((ref) => {
                  const orgId = ref.id;
                  const organisation = firestore.collection('organisations').doc(orgRef).collection('childOrganisations').doc(orgId);
                  this.$bind('org', organisation);
                });
              });
          } else {
            const organisation = firestore.collection('organisations').doc(orgRef);
            this.$bind('org', organisation);
          }
        });
      });
    }, (error) => {
      console.log(error);
    });

在单个 Vue 组件中从 Firestore 获取父和子文档数据

Getting parent and child document data from Firestore in a single Vue component

firebase

vue.js

vuefire