Vue使用async/await加载数据时post.likes未定义问题求解

为什么用async/await仍会出现post.likes未定义的错误？ #

onBeforeMount里的异步请求虽然用了async/await，但请求本身是异步执行的——组件挂载时，请求还没完成，homefeed还是初始的空值或未定义状态，模板已经开始渲染循环中的帖子，此时访问post.likes自然会报错。async/await只是让异步代码的写法更像同步，不会阻塞组件挂载流程。

解决方法：让无赞帖子显示点赞按钮，同时避免未定义错误 #

方法1：预处理后端返回的数据，给无赞帖子补默认值 #

在拿到后端数据后，给每个帖子的likes字段设置默认值，确保即使后端没返回likes，也有合法的结构供模板使用：

onBeforeMount(async () => {
    const feed = await axios.get("api/v1/posts/" + loggedUser + "/home/feed/");
    // 处理数据：给没有likes的帖子补上默认结构[未点赞状态, 赞数]
    const processedPosts = feed.data.map(post => ({
        ...post,
        likes: post.likes ?? [false, 0]
    })).sort((a, b) => (a.created_at > b.created_at ? 1 : -1));
    
    homefeed.value = processedPosts;
    filtered.value = processedPosts;
});

之后模板里可以直接去掉外层的v-if="post.likes"，正常使用post.likes：

<div class="postLike flex alignCenter">
    <div class="postLikeImg" @click="likePost">
        <img
            class="functionImg mr5"
            alt="Like this post"
            src="../assets/img/like.png"
            @click="likePost"
            v-if="!post.likes[0]"
        />
        <img
            class="functionImg mr5"
            alt="Like this post"
            src="../assets/img/liked.png"
            @click="unlikePost"
            v-if="post.likes[0]"
        />
    </div>
    <div class="postStatsBtn likeTotal">
        {{ post.likes[1] }}
    </div>
</div>

方法2：在模板中使用可选链+空值合并运算符，直接处理未定义情况 #

如果不想修改后端返回的数据，可以在模板里用Vue支持的可选链(?.)和空值合并(??)运算符，安全访问likes字段并设置默认值：

<div class="postLike flex alignCenter">
    <div class="postLikeImg" @click="likePost">
        <img
            class="functionImg mr5"
            alt="Like this post"
            src="../assets/img/like.png"
            @click="likePost"
            v-if="!(post?.likes?.[0] ?? false)"
        />
        <img
            class="functionImg mr5"
            alt="Like this post"
            src="../assets/img/liked.png"
            @click="unlikePost"
            v-if="post?.likes?.[0] ?? false"
        />
    </div>
    <div class="postStatsBtn likeTotal">
        {{ post?.likes?.[1] ?? 0 }}
    </div>
</div>

• post?.likes：如果post存在才访问likes，否则返回undefined
• post?.likes?.[0] ?? false：如果likes[0]不存在或为undefined，默认设为false（未点赞状态）
• post?.likes?.[1] ?? 0：如果赞数不存在，默认显示0

这样不管帖子有没有赞，都会显示点赞按钮区域，同时不会出现未定义错误。

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