首頁  >  問答  >  主體

為什麼我的Vue.js fetch API程式碼無法正確顯示虛擬使用者?

<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粉982009874P粉982009874400 天前593

全部回覆(1)我來回復

  • P粉903052556

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

    在元件實例內部,您需要使用this來引用資料和方法 (在HTML部分不需要,因為Vue很聰明!)

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

    確保您有這個腳本標籤以從CDN中使用Vue(我假設您已經有了,但它不在您的程式碼中!)

    就像官方文件中的範例一樣:

    回覆
    0
  • 取消回覆