简体中文(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
612

<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學習者快速成長！