Question

我试图通过使用Vue.js和Axios中的v-for函数获取数据来在我的网页上显示JSON数据。下面是我的代码和我要使用的JSON数据示例。

由于它是私有的，因此我故意保留了JSON数据URL，这就是为什么我提供了数据结构示例的原因。

我可以将整个数据集打印到我的页面上，如下所示，但是如果我使用下面的代码打印数据的特定部分，例如id或name，那就是我在页面上什么都没有得到的东西。

<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 }

Answer 1

查看代码，一切看起来都很好，但是我在正在处理的应用程序中有一个示例，并且我注意到您的items数组应包含response.data.data.data，这是很冗长的，但您可以稍后进行处理< / p>

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

1 个答案: