javascript - 如何在 vuejs 中的 json 对象中找到嵌套键
问题描述
我正在尝试从我的 VUEjs 应用程序上的 Django API 获取的用户列表中显示用户。
我的用户列表数据来自 API:
{
"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 的新手,有人可以帮忙吗?
解决方案
如果您只想循环results
通过APIData
:
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>
推荐阅读
- javascript - 获取输入值具有相同的 id 和名称
- android - 如何在嵌套的自定义视图中传播点击?
- django - aws ecs:在 ALB 后面将 django 和 nginx 部署在同一实例与单独的实例上
- sql - 在自引用表中排序
- xml - 如果找到特定值,如何在 xslt 中循环并跳过其他值
- c# - 如何使用 Servicestack.Ormlite 加入两个 SqlExpression With And Condition
- icons - 如何在谷歌应用程序制造商中安装材料图标
- python-3.x - 在缩放图像中查找图像
- reactjs - 如何在 React 中进行 POST API 调用?
- c# - 不给出使用 ToListAsync 连接表的结果