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

【问题标题】：Using Axios and Vue.js to load JSON data使用 Axios 和 Vue.js 加载 JSON 数据
【发布时间】：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 示例数据相同，它应该可以按预期工作。

标签： json vue.js axios

【解决方案1】：

查看代码一切正常，但我在正在处理的应用程序中有一个示例，我注意到您的 items 数组应包含 response.data.data.data 非常冗长，但您可以稍后再处理

【讨论】：