使用v-for渲染Firebase数据库数据时应用崩溃，求排查解决

核心错误点 #

• 未执行数据加载逻辑：getPremium()返回的异步加载方法load未被调用，数据库数据从未被获取
• v-for遍历目标错误：直接遍历getPremiums（这是包含profiles、error、load的对象），而非遍历其中存储数据的profiles数组，触发渲染逻辑崩溃

修复后的页面代码 #

<script>
import { getPremium } from '../Composables/getPremium.js';
import { onMounted } from 'vue';

// 解构获取数据、错误信息和加载方法
const { profiles, error, load } = getPremium();

// 组件挂载时异步加载数据
onMounted(async () => {
  await load();
});
</script>

<!-- 先渲染错误提示（如果有） -->
<div v-if="error" class="text-red-500">
  {{ error }}
</div>

<!-- 遍历正确的profiles数组 -->
<div v-for="Premium in profiles" :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>

补充说明 #

• 用解构赋值简化属性获取，代码可读性更强
• 在onMounted钩子中调用load，确保组件挂载后才发起数据库请求
• 添加错误状态渲染，便于快速定位数据加载失败问题

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