Vue渲染JSON API嵌套对象遇阻，差关键代码求帮助

你的代码存在两个核心问题：

• 未将API返回的数据赋值给Vue实例的响应式变量
• 未处理API返回的数组结构及嵌套属性

以下是修正后的完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fish Species</title>
</head>
<body>
    <div class="app">
        <h1>Fish Species List</h1>
        <!-- 遍历数组并渲染嵌套的物种名称 -->
        <ul>
            <li v-for="(fish, index) in fishList" :key="index">
                {{ fish['Species Name'] }}
            </li>
        </ul>
    </div>

    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script>
        let app = Vue.createApp({
            data: function() {
                return {
                    fishList: [] // 初始化为空数组，匹配API返回的数组结构
                }
            },
            mounted() {
                // 组件挂载后发起API请求
                fetch('https://www.fishwatch.gov/api/species')
                    .then(res => res.json())
                    .then(data => {
                        // 将返回数据赋值给响应式变量
                        this.fishList = data;
                    })
                    .catch(err => console.error('请求出错:', err));
            }
        })
        app.mount('.app')
    </script>
</body>
</html>

关键修改说明： #

• 响应式变量调整：把原fishName改为fishList并初始化为空数组，适配API返回的多物种数组结构
• 请求时机优化：将fetch逻辑移入mounted钩子，确保组件初始化完成后再请求数据，此时可通过this访问响应式变量
• 嵌套属性访问：使用fish['Species Name']访问带空格的嵌套属性（也可写成fish["Species Name"]）
• 错误处理：添加catch块捕获请求异常，便于调试排查问题

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