json - 使用 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[];
       });
    },

  });

};

自然这不会返回任何内容，我不确定如何this.items = data.item7[];使用 vue 资源循环数组。

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: []
},