Vue中v-for循环无法渲染fetch返回的projs数组问题求助

问题原因 #

• 核心问题：fetch回调中仅把接口返回的项目列表赋值给了函数内部的局部变量projs，没有赋值给Vue实例的响应式数据this.projs，Vue无法监听到数据更新，视图自然不会渲染循环内容。
• 次要问题：v-for的key属性绑定错误，你写的projs.slg中projs是数组本身，没有slg属性，应该取当前循环项p的slg字段，否则会触发Vue告警。
• 潜在问题：请求逻辑顺序错误，应该先判断response.ok再解析JSON返回值，同时原代码中引用了未定义的data变量，methods对象也缺少闭合符号，存在语法错误。

修复方案 #

1. 修正Vue实例逻辑，正确赋值响应式变量 #

修复后的JS代码：

const vueApp = new Vue({
    delimiters: ['${', '}'],
    el: '#projs-container',
    data: {
        base_url: 'http://127.0.0.1:8080',
        display: 'this is rendered fine',
        projects: [],
        projs: [],
        errorMessage: '' // 提前声明用到的变量，避免控制台告警
    },
    async created() {
        try {
            const response = await fetch("http://127.0.0.1:8080/projects-json")
            // 先校验请求状态再解析返回值
            if (!response.ok) {
                const error = await response.json().then(d => d.message || response.statusText)
                throw new Error(error)
            }
            const projects = await response.json()
            console.log('fetched data is:', projects)
            // 赋值给Vue响应式变量，触发视图更新
            this.projs = projects.projs
        } catch (error) {
            this.errorMessage = error.message
            console.error("There was an error!", error)
        }
    }
})

2. 修正HTML中v-for的key绑定 #

修复后的HTML代码：

<div id="projs-container">
    <p>Hello World. ${ display }</p>
    <ul id="projs-loop">
        <!-- key改为当前循环项p的slg字段 -->
        <li v-for="p in projs" :key='p.slg'>
            ${ p.ttl }
        </li>
    </ul>
</div>

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