Получение данных родительского и дочернего документов из Firestore в одном компоненте Vue


Получение данных родительского и дочернего документов из Firestore в одном компоненте Vue

26.08.2020 11:05:19 Просмотров 58 Источник

У меня есть родительский (организационный) документ в 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);
    });
  },
}
У вопроса есть решение - Посмотреть?

Ответы - Получение данных родительского и дочернего документов из Firestore в одном компоненте Vue / Getting parent and child document data from Firestore in a single Vue component

Является ответом!
deRaaf

18.09.2020 11:03:25

Я решил эту проблему, используя идентификатор из childOrg и получая данные с этим идентификатором, таким образом, я мог бы напрямую привязать объект данных.

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);
    });
Помочь в развитии проекта:
Закрыть X