Vue：检索 Firestore 数据以显示用户的企业名称 v-for 循环

Posted 2023-02-22

【中文标题】Vue：检索 Firestore 数据以显示用户的企业名称 v-for 循环

【英文标题】：Vue: Retrieve firestore data to show user's business name v-for loop

【发布时间】：2021-01-22 09:29:12

【问题描述】：

在我的项目中，我正在处理电子商务的结果页面。

我想从两个集合中检索数据。 一个叫做“Product”，另一个叫做“ProUser”。

现在，我可以从“产品”集合中检索并显示产品信息。 我使用 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"
                
                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>

现在的问题是，我可以在

<div class=" card__content v-for="(item, index) in ProUsers" :key="index" item.business product.quantity orders>

不显示所有店铺名称。

我的问题是，换句话说，我想获取产品和产品所有者。 现在在一个标签中，我可以在“ProUser”集合中显示所有产品所有者的一个产品。

希望有人帮助我。

如果您需要更多信息，请随时询问。

【问题讨论】：

prouser 只有 1 个业务字段权限，因此它只会为每个用户呈现 1 个。

我的问题是，换句话说，我想获取产品和产品所有者。现在我可以向“ProUser”集合中的所有产品所有者展示一个产品。

您要获取与 prouser 相关的产品，对吗？

@NaveenKashyap 我想展示与产品相关的专业用户。所以是的。

您可以做的是在获取数据后，您可以将 id 添加到对象的新数据数组中，并且 v-for 您可以将 pouser id 与产品 id 匹配，并显示它是否匹配或合并两者获取数据时 prouser 和产品具有相同的 id

【参考方案1】：

这是您如何从 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);
    );

【讨论】：

如果你想获取所有的 remove doc() 方法，你会收到一个快照并遍历快照，并做同样的检查用户 ID 和产品 ID，如果匹配推送新对象到数组中跨度>

谢谢，您的代码对我来说很有意义。但仍然会显示所有商家名称。

所有企业名称都显示什么？你能提供图片吗？

我想在产品图片下方显示一个对应的商家名称。但是现在，我在产品图片下方的“ProUser”集合中看到了所有企业名称。我想解决这个问题。

我想在 Firestore 中实现一对一的关系。