使用 vue 资源访问 API 中的嵌套对象

Question

我刚开始使用 vue 资源（通常 ajax），但我无法列出嵌套在我的 API.

中的数组

如果这是我的样本JSON:

{
  "item1" : "data",
  "item2" : 1234,
  "item3" : 5678,
  "item6" : "data",
  "item7" : [ {
    "id" : 0,
    "data2" : "testdata",
    "data3" : "testdata",
  },{
    "id" : 2,
    "data2" : "testdata",
    "data3" : "testdata",
  },{
    "id" : 3,
    "data2" : "testdata",
    "data3" : "testdata",
  } ]
}

我想通过我的 html 中的列表传递 item7 数组，如下所示：

<div id="app">
  <ul v-for="item in items">
      <li>{{ item.data2 }} {{ item.data3 }}</li>
  </ul>
</div>

这是我的 js：

window.onload = function() {

  new Vue({
    el: '#app',
    data: {
      items: {}
    },
    ready: function () {
       this.$http.get('/api/items', function(data) {
        console.log(data);
        this.items = data.item7[];
       });
    },

  });

};

自然这 returns 没什么，我不确定如何使用 vue 资源通过 this.items = data.item7[]; 循环数组。

Answer 1

只需要写this.items = data.item7，不需要写[]。

您还需要将 this 绑定到函数。当您处于 HTTP 请求的回调中时，this 指的是其他内容。所以你可以像这样使用 .bind(this)：

this.$http.get('/api/items', function(data) {
    this.items = data.item7;
 }.bind(this));

最后，如果 items 是一个数组，你应该将其实例化为一个数组：

data: {
  items: []
},

使用 vue 资源访问 API 中的嵌套对象

Access nested objects in API using vue resource

json

vue.js

vue-resource