Vue.js怎么获取页面json数据啊 求解答(get方式) 尝试后失败了 (vue.js和axios.min.js已引用)?
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue.js怎么获取页面json数据啊 求解答(get方式) 尝试后失败了 (vue.js和axios.min.js已引用)?相关的知识,希望对你有一定的参考价值。
参考技术A 1、按照描述的,其实只要用axios的get方法获取到结果,用JSON.parse方法转一下就可以用了;2、可能思路有时候会被绕进去,放松下就可以想到了
使用 Axios 和 Vue.js 加载 JSON 数据
【中文标题】使用 Axios 和 Vue.js 加载 JSON 数据【英文标题】:Using Axios and Vue.js to load JSON data 【发布时间】:2019-04-11 06:16:56 【问题描述】:我正在尝试使用 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
【问题讨论】:
如果 this.items 与您的 Json 示例数据相同,它应该可以按预期工作。 【参考方案1】:查看代码一切正常,但我在正在处理的应用程序中有一个示例,我注意到您的 items 数组应包含 response.data.data.data
非常冗长,但您可以稍后再处理
【讨论】:
以上是关于Vue.js怎么获取页面json数据啊 求解答(get方式) 尝试后失败了 (vue.js和axios.min.js已引用)?的主要内容,如果未能解决你的问题,请参考以下文章
JS中获取checkbox复选框的Value值 怎么不行啊 求解答 谢谢了!!!
sql中数据类型为float型,字段值为0.8,显示的时候怎么就显示.8啊,因为数据是要绑定到界面的,求解答!