简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
为什么我的Vue.js fetch API代码无法正确显示虚拟用户？
P粉982009874
P粉982009874 2023-09-14 23:50:21
0
1
537

<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}}>
                    </img>
                    <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 =>users = (data.data));

                }
            },
            mounted() {

                this.loadUsers()
            }
        },
        ).mount('#usuarios')
    </script>
</body>
” //我尝试了多次更改loadUsers方法，这是不会出现错误的方式。 //然而，仍然无法正常工作。目标是使用fetch从数据中加载users数组，并在vue中使用user显示用户信息

P粉982009874
P粉982009874

全部回复(1)
P粉903052556
P粉9030525562023-09-15 17:20:29 1 楼

在组件实例内部，您需要使用this引用数据和方法 （在HTML部分不需要，因为Vue很聪明！）

then(data => this.users = (data.data));

确保您有这个脚本标签以从CDN中使用Vue（我假设您已经有了，但它不在您的代码中！）

就像官方文档中的示例一样：

点赞 +0
添加回复
热门专题
更多>
热门文章
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网：公益在线PHP培训，帮助PHP学习者快速成长！