Vue.js Fetch API无法正常显示模拟用户数据的问题求助

你的代码存在三个关键问题导致数据无法正常渲染，以下是修复细节及完整代码：

核心问题与修复点 #

• 未正确操作Vue响应式数据：loadUsers方法里直接赋值users = data.data不会更新组件的users数组，必须通过this.users访问组件的响应式属性，这样Vue才能监测到数据变化并更新视图。
• 图片属性绑定错误：Vue中不能在HTML属性里直接用{{}}插值，需要用v-bind:src（简写:src）来绑定图片地址。
• 用户名显示格式错误：代码里的+号会直接显示在页面上，应该用空格分隔名字。

修复后的完整代码 #

<body class="container bg-warning">
    <h1>
        Usuários de Teste via REST
    </h1>
    <p>
        referência ao site reqres.in responsável por fornecer os dados de teste,
        no formato JSON, de forma gratuita
    </p>
    <div id="usuarios" class=" container-fluid">
        <div class="row">
            <div class="card col-3 p-2 m-3" v-for="(user,index) in users" v-bind:key="index">
                <div class=" card-body">
                    <img class="card-img-top" :src="user.avatar" />
                    <h1>
                        {{user.first_name}} {{user.last_name}}
                    </h1>
                    <p>
                        {{user.email}}
                    </p>
                </div>
            </div>
        </div>
    </div>
    <script>
        const { createApp } = Vue

        createApp({
            data() {
                return {
                    users: []
                }
            },
            methods: {
                loadUsers() {
                    fetch('https://reqres.in/api/users?per_page=10')
                        .then(res => res.json())
                        .then(data => this.users = data.data)
                        .catch(err => console.error('请求失败:', err)); // 新增错误处理，方便调试
                }
            },
            mounted() {
                this.loadUsers()
            }
        }).mount('#usuarios')
    </script>
</body>

内容的提问来源于stack exchange，提问作者John William Makant