Vue.js 3 + TypeScript从API取数后模板空白无显示求助

你的问题出在初始渲染时datas是空数组，直接访问datas[0].image会触发报错，导致Vue无法正常渲染页面。

原因分析 #

组件挂载完成前，datas的初始值是空数组[]，模板里直接写datas[0].image相当于访问undefined.image，会抛出Cannot read properties of undefined (reading 'image')的错误。Vue遇到这类致命渲染错误会停止页面渲染，所以你看到空白页面——尽管后续onMounted里成功请求到了数据，但初始渲染的报错已经阻断了后续更新流程。

解决方案 #

有几种简单直接的修复方式：

1. 使用可选链操作符（推荐）

在模板里给属性访问加上?.，避免访问undefined的属性：

<template>
    <div>
        <img :src="datas[0]?.image">
    </div>
</template>

?.会在datas[0]为undefined时直接返回undefined，不会触发报错，等数据请求完成后，datas[0]有值时就会正常加载图片。

2. 添加v-if判断，确保数据存在再渲染

先判断datas[0]是否存在，再渲染图片节点：

<template>
    <div>
        <img v-if="datas[0]" :src="datas[0].image">
    </div>
</template>

初始状态下datas[0]不存在，图片不会被渲染，避免报错；数据加载完成后，datas[0]有值，图片自动显示。

3. 设置初始默认值（适合需要占位的场景）

给datas设置包含默认对象的初始值，避免初始时出现undefined：

const datas = ref<datasInterface[]>([{
    id: 0,
    title: '',
    price: 0,
    description: '',
    category: '',
    image: '', // 可以填入一张占位图地址
    rating: {
        rate: 0,
        count: 0
    }
}])

另外，排查Vue渲染问题时，优先打开浏览器控制台（F12）查看报错信息，你现在打开应该能看到上述的undefined访问错误。

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