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

使用vue资源

1 个答案: