suchen

Heim  >  Fragen und Antworten  >  Hauptteil

Warum zeigt mein Vue.js-Abruf-API-Code virtuelle Benutzer nicht korrekt an?

<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粉982009874P粉982009874447 Tage vor629

Antworte allen(1)Ich werde antworten

  • P粉903052556

    P粉9030525562023-09-15 17:20:29

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

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

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

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

    Antwort
    0
  • StornierenAntwort