json - 使用 Axios 和 Vue.js 加载 JSON 数据
问题描述
我正在尝试使用 Vue.js 和 Axios 中的 v-for 函数在我的网页上显示 JSON 数据来获取数据。下面是我的代码和我尝试使用的 JSON 数据的示例。
我故意保留 JSON 数据 URL,因为它是私有的,这就是我提供数据结构示例的原因。
我可以将整个数据集打印到我的页面上,如下所示,但是如果我使用下面的代码来打印数据的特定部分,例如 id 或名称,那么我在页面上什么也得不到。
<div id="root">
<p v-for="item in items">{{ item.name }}</p>
</div>
<script>
var app = new Vue({
el: '#root',
data: {
items: []
},
mounted() {
axios.get("...")
.then(response => {this.items = response.data.data})
}
});
</script>
JSON数据示例:
json
{
"current_page": 1,
"data": [
{
"id": "83",
"name": "Name1",
},
{
"id": "78",
"name": "Name2",
},
{
"id": "720",
"name": "Name3",
},
{
"id": "707",
"name": "Name4",
},
{
"id": "708",
"name": "Name5",
}
],
"from": 1,
"prev_page_url": null,
"to": 20,
"total": 42
}
解决方案
查看代码一切看起来都不错,但我在我正在处理的应用程序中有一个示例,我注意到您的 items 数组应该包含response.data.data.data
非常冗长,但您可以稍后再处理
推荐阅读
- zsh - zsh:运行 zle 小部件后的刷新提示
- javascript - 我在关键操作中遇到错误
- python - 不能在 python virtualenv 中使用 pip
- vb.net - 如何找出 ExecuteScalar() 是 dbnull
- visual-studio - .net core 的新手,打开了一个 .net core .sln 文件,但所有库(使用)都消失了
- firefox - Firefox启用字体平滑
- apache-spark - Spark 2.3+ 使用 parquet.enable.dictionary?
- c# - 返回行,当唯一键变化发生时
- php - 如果提交的是输入类型文件,则 laravel 中的 required_if 验证不会给出错误
- android - 将字符串转换为链接