我正在尝试在我的VUEjs应用程序上显示来自Django API的用户列表中的用户。
我的API中的用户列表数据：
2
954{
"count": 1,
"next": null,
"previous": null,
"results": [
{
"url": "http://localhost:8000/v1/users/1/",
"username": "admin",
"email": "admin@example.com",
"groups": []
}
]
}
我的VUE代码：
<template>
<div>
<h1> Users </h1>
<div v-for="results in APIData" :result="results" :key="results.username">
<h5>{{ result.username }}</h5>
<p>{{ result.email }}</p>
</div>
</div>
</template>
<script>
import { getAPI } from '../axios-api';
import { mapState } from 'vuex';
export default {
name: 'Users',
computed: mapState(['APIData']),
created() {
getAPI.get('/v1/users/', { headers: { Authorization: 'Bearer ' + this.$store.state.accessToken } })
.then(response => {
this.$store.state.APIData = response.data
})
.catch(error => {
console.log(error)
})
}
}
</script>
由于某种原因，尽管我可以看到我的API请求成功并且在网络选项卡中可以看到数据，但数据没有显示在网页上。显示用户的方式正确吗？还是我漏掉了什么？
我对VUEjs还不熟悉，有人可以帮忙吗？
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
问题出在v-for上，你可以尝试使用：
v-for="results in APIData.results"，因为"results"不是一个访问器，而是你给数组中的每个值分配的名称，而APIData不是一个数组。如果你只想循环遍历
APIData中的results：new Vue({ el: '#demo', data() { return { APIData: { "count": 1, "next": null, "previous": null, "results": [ { "url": "http://localhost:8000/v1/users/1/", "username": "admin", "email": "admin@example.com", "groups": [] }, { "url": "http://localhost:8000/v1/users/1/", "username": "user", "email": "user@example.com", "groups": [] } ] } } }, })<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="demo"> <template> <div> <h1> Users </h1> <div v-for="result in APIData.results" :key="result.username"> <h5>{{ result.username }}</h5> <p>{{ result.email }}</p> </div> </div> </template> </div>