Блог

В моем проекте я работаю над страницей результатов электронной коммерции.

Я хочу получить данные из двух коллекций. Один называется «Product», а другой называется «ProUser».

Теперь я мог бы извлекать и показывать информацию о продукте из коллекции «Product». Я использовал цикл v-for для отображения информации о каждом элементе.

Я также хочу получить название магазина в коллекции «ProUser» для каждого пользователя одновременно. Я установил название магазина в поле «бизнес».

Коллекция продуктов соответствует uid.

В моей консоли разработчика я мог подтвердить, что могу получить все данные из коллекции «ProUser».

Ниже приведен мой vue.js код.

Теперь в моем браузере я не могу показать название магазина каждого пользователя.

 <template>
    <div class="main">
      <section class="cards">
        <div class="card-list" v-for="(item, index) in getMenuItems" :key="index">
          <div class="card" >
          <div class="product-list" v-if="item.quantity > 0">
            <div class="quantity">
                <span>{{ item.quantity }}</span>
            </div>
            <div class="card__image-container" v-for="(sample, index) in item.sample" :key="index">
              <router-link to="/product">
              <img
                :src="sample"
                alt="Detailed image description would go here."
                class="image"
              />
              </router-link>
              <!-- Retrieve business name from the ProUser collection. -->
              <div class="card__content"  v-for="(item, index) in ProUsers" :key="index">
                  <div class="card__info">
                      <span class="text--medium">{{ item.business }}</span>
                      <span class="card__distance text--medium"> product.quantity -- orders </span>
                  </div>
              </div>
            </div>
          <div class="icons">
            <div class="time">
              <span>{{ item.limitObject }}</span>
             </div>
              <div class="fav">
              <span>Heart</span>
             </div>
              <div class="price">
              <span>{{ item.sale }}</span>
             </div>
          </div>
          </div>
        </div>
        </div>

      </section>
    </div>
    </div>
    </div>
    
</template>

<script>
import axios from 'axios';
import fireApp from '@/plugins/firebase'
const firebase = require("firebase");
require("firebase/firestore");
const db = firebase.firestore();
import googleMapMixin from '@/mixins/googleMapMixin'
import { mapGetters } from 'vuex'


    export default {
        name: "UserLocation",
        data() {
            return {
                address: "",
                error: "",
                spinner: false,
                ProUsers: []
            }
        },
        mixins: [googleMapMixin],
        created() {
          //vuexfire
          const dbMenuRef = db.collection('Product')
          this.$store.dispatch('setMenuRef', dbMenuRef)

          //firestore
          db.collection("ProUser")
          .get()
          .then((querySnapshot)=> {
              querySnapshot.forEach((doc) => {
                  console.log(doc.id, " => ", doc.data());
                  this.ProUsers.push(doc.data())
              });
          })
          .catch((error) => {
              console.log("Error getting documents: ", error);
          });
        },        
        computed: {
            ...mapGetters([
                'getMenuItems'
            ])
        },
        methods: {
          
        }
    }
</script>
  

Проблема теперь в том, что я мог видеть все название магазина в

Чего я хочу добиться, так это показать здесь одно название магазина каждого пользователя.

 <!-- Retrieve business name from the ProUser collection. -->
                  <div class="card__content"  v-for="(item, index) in ProUsers" :key="index">
                      <div class="card__info">
                          <span class="text--medium">{{ item.business }}</span>
                          <span class="card__distance text--medium"> product.quantity -- orders </span>
                      </div>
                  </div>
                </div>
  

Не отображается все название магазина.

Другими словами, я хочу получить продукт и владельца продукта. Теперь в одном теге я мог бы показать один продукт со всеми владельцами продуктов в коллекции «ProUser».

Надеюсь, кто-нибудь мне поможет.

Если вам нужна дополнительная информация, пожалуйста, не стесняйтесь спрашивать.

Вот как вы можете извлечь данные пользователя из коллекции prouser, а затем извлечь продукт, связанный с prouser, и создать новый объект из данных из обоих данных коллекции.

   let data = [];
  let db = firebase.firestore();
  db.collection("ProUser")
    .get()
    .then((userSnapshot) => {
      db.collection("Product")
        .get()
        .then((productSnapshot) => {
          userSnapshot.forEach((user) => {
            productSnapshot.forEach((product) => {
              if (user.id === product.id) {
                data.push({
                  uid: user.id,
                  pId: product.id,
                  ...user.data(),
                  ...product.data(),
                });
              }
            });
          });
        })
        .catch((e) => {
          console.log(e);
        });
    })
    .catch((e) => {
      console.log(e);
    });