Vue项目中API响应数据无法通过v-for正常渲染问题求助

问题分析 #

你遇到的核心问题是初始值未正确初始化导致的渲染异常：

• 用ref()初始化vendors时未设置初始值，默认是undefined
• Vue的v-for仅会遍历可迭代对象（比如数组），当vendors为undefined时循环不会执行；虽然后续异步请求完成后会赋值数组，但偶尔会因响应式更新时机问题，导致模板未重新渲染

另外，代码缺少v-for必须的key属性，这是Vue列表渲染的最佳实践，缺失可能引发不可预期的渲染异常。

修复步骤 #

1. 初始化ref为空数组
   将const vendors = ref()改为const vendors = ref([])，确保模板初始化时就有可遍历的空数组，后续数据返回后会自动触发更新渲染。

2. 为v-for添加key属性
   在<li>标签上添加:key="vendor.id"，帮助Vue跟踪每个列表项的身份，提升渲染性能并避免异常。

3. 可选：添加加载状态
   增加加载状态变量，在请求完成前显示提示，提升用户体验。

修复后的完整代码 #

<script>
import axios from 'axios'
import { ref } from 'vue'

export default {
    setup () {
        // 初始化为空数组
        const vendors = ref([])
        const isLoading = ref(true)

        const loadvendors = async () => {
            try {
                const response = await axios.get('http://localhost:1337/vendors')
                // 验证返回数据格式（可选）
                if (Array.isArray(response.data)) {
                    vendors.value = response.data
                } else {
                    console.error('API返回的数据不是数组:', response.data)
                }
            } catch (err) {
                console.error('加载供应商数据失败:', err)
            } finally {
                isLoading.value = false
            }
        }

        loadvendors()
       
        return {
            vendors,
            isLoading
        }
    }
}
</script>

<template>
    <h1>Vendors</h1>
    <!-- 加载状态提示 -->
    <div v-if="isLoading">加载中...</div>
    <!-- 列表渲染 -->
    <ul v-else>
        <li v-for="vendor in vendors" :key="vendor.id">
            {{ vendor.vendor_name }}
        </li>
    </ul>
</template>

验证要点 #

• 打开浏览器控制台，检查是否有报错信息
• 确认response.data确实是你提供的数组格式
• 修复后，列表应能正常显示每个供应商的名称

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