Vue报错reply.profile未定义但图片正常显示，求排查解决思路

你遇到的错误是因为组件初始化渲染时，异步请求还没完成，reply的值还没被赋值，这时候模板里直接访问reply.profile就会触发undefined报错。虽然之后请求完成，reply被填充了数据，头像能正常显示，但初始渲染阶段的错误已经被控制台捕获了，所以刷新、清缓存都没用。

下面是几种能彻底消除这个错误的方案：

方案1：给reply设置初始默认值 #

在声明reply响应式变量的时候，提前给它一个包含空profile对象的初始值，确保模板渲染时reply.profile不会是undefined：

// 把原来的空ref初始值改成带空profile的对象
const reply = ref({ profile: {} })

方案2：使用可选链操作符?. #

在模板里访问属性时加上?.，它会自动判断前面的属性是否存在，不存在就返回undefined，不会触发报错：

<router-link
    v-if="reply.profile?.photo"
    :to="{ path: '/user/' + post.user }"
>
    <div class="userImage">
        <img
            class="userImg"
            :src="'http://127.0.0.1:8000' + reply.profile?.photo"
        />
    </div>
</router-link>

方案3：给头像区块加外层判断 #

确保reply有值之后再渲染头像相关内容，避免初始时访问不存在的属性：

<template v-if="reply">
    <router-link
        v-if="reply.profile.photo"
        :to="{ path: '/user/' + post.user }"
    >
        <div class="userImage">
            <img
                class="userImg"
                :src="'http://127.0.0.1:8000' + reply.profile.photo"
            />
        </div>
    </router-link>
</template>

这三种方案任选其一都能解决问题，其中方案2（可选链）是Vue项目里处理这类异步数据渲染问题最常用的方式，写法最简洁。

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