Vue应用中无法用v-for渲染Firestore多用户数据问题求助

你的代码存在两个关键错误导致v-for无法正常渲染，以下是具体问题和修复步骤：

1. v-for数据源名称错误 #

模板中你写了v-for="Premium in getPremiums"，但getPremiums这个变量根本不存在——你从getPremium()解构出来的数据源是Premium，这才是要循环的数组。

2. v-for循环项与数据源重名 #

v-for="Premium in Premium"会导致循环项的变量名覆盖外层的Premium数组，引发逻辑冲突，建议把循环项改成小写的premium或其他不同名称。

额外优化：规范异步加载时机 #

直接在script中调用load()虽然能运行，但更规范的做法是在组件挂载后（onMounted钩子）执行加载逻辑，避免潜在的生命周期问题。

修改后的Vue组件代码 #

<script setup>
import { onMounted } from 'vue'
import getPremium from "../Composables/getPremium.js";
const { Premium, error, load } = getPremium();

// 组件挂载后加载数据
onMounted(() => {
  load();
})
</script>
<template>
  <!-- 错误提示（可选） -->
  <div v-if="error" class="text-red-500">{{ error }}</div>
  <!-- 加载状态提示（可选） -->
  <div v-else-if="Premium.length === 0" class="text-gray-500">加载中...</div>
  <!-- 正确循环数据源 -->
  <div v-for="premium in Premium" :key="premium.id" >
    <div class="hover:scale-105 transition ease-in-out duration-300 bg-neutral-800 hover:bg-neutral-900 active:bg-neutral-900 text-neutral-400 font-bold rounded-xl">
      <br>
      <p>{{ premium.Name }}</p>
      <img src="../assets/Sample-pic.png" class="object-contain ml-6 w-60 h-80 transition ease-in-out duration-300">
      <div class="grid grid-cols-2 grid-rows-fit text-left ml-6">
        <p>Location:</p>
        <p>{{ premium.Location }}</p>
        <p>Rates:</p>
        <p>{{ premium.Rates }} /hr</p>
        <p>Phone:</p>
        <p>{{ premium.Phone }}</p>
      </div><br>
    </div>
  </div>
</template>

额外检查项 #

• 确认Firebase配置正确：projectFirestore是否已正确初始化，权限规则是否允许读取Premium集合（新手常犯的错误是Firestore权限默认禁止读取，需要在控制台调整规则）。
• 确认Firestore中Premium集合的文档字段名与模板中使用的Name、Location等完全一致（大小写敏感）。

内容的提问来源于stack exchange，提问作者Epimetheus14