使用 Axios 和 Vue.js 加载 JSON 数据

Posted

技术标签:

【中文标题】使用 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 非常冗长,但您可以稍后再处理

【讨论】:

以上是关于使用 Axios 和 Vue.js 加载 JSON 数据的主要内容,如果未能解决你的问题,请参考以下文章

如何使用 axios 在 Vue Js 中导入 json 数据

Vue.js怎么获取页面json数据啊 求解答(get方式) 尝试后失败了 (vue.js和axios.min.js已引用)?

在 Vue JS 中使用 Axios 将 json 数据发布到 API 的问题

VUE.JS 通过 webpack-simple 中的 axios 从 url 接收一个 json 文件

如何从 vue.js axios POST 在 Laravel 中获取 JSON?

vue.js中axios的封装(参考)