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

【问题标题】：Getting parent and child document data from Firestore in a single Vue component在单个 Vue 组件中从 Firestore 获取父子文档数据
【发布时间】：2020-12-14 23:51:46
【问题描述】：

我在 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);
    });
  },
}

【问题讨论】：

试试this.$set(this, 'org', org) 而不是this.org = org; ?
@sugars 可悲的是，这没什么区别。
你能提供一个codesandbox或codepen用最少的代码吗？

标签： firebase vue.js vuefire

【解决方案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);
    });

【讨论】：