简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Warum zeigt mein Vue.js-Abruf-API-Code virtuelle Benutzer nicht korrekt an?
P粉982009874
P粉982009874 2023-09-14 23:50:21
0
1
610

<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>
" //Ich habe mehrmals versucht, die Methode „loadUsers“ zu ändern, aber auf diese Weise wird der Fehler nicht angezeigt. // Funktioniert jedoch immer noch nicht. Das Ziel besteht darin, mit fetch das Benutzerarray aus Daten zu laden und mit user in vue Benutzerinformationen anzuzeigen

P粉982009874
P粉982009874

Antworte allen(1)
P粉903052556
P粉9030525562023-09-15 17:20:29 1 Etage

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

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

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

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

Wie +0
Antwort hinzufügen
Beliebte Themen
Mehr>
Populäre Artikel
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website：Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！