如何在vue.js中显示嵌套对象

Question

我返回的数据是一个带有嵌套对象的对象数组。 我无法在模板中的v-for循环中显示“事件”，因为我似乎无法访问返回数据的那部分。

这样返回数据（来自Vue DevTools）：

list: Object
    user: "name"
    id: "id"
    events: Array[3]
        0: Object
           title: "event 1"
        1: Object
           title: "event 2"
        2: Object
           title: "event 3"

使用Vue-resource（通过CDN）如何只显示模板中的事件？

模板：

<template id="events-template">
  <div v-for="events in list">
    @{{events.title}}
  </div>    
</template>

我的应用程序：

Vue.component('events', {
template: '#events-template',

data: function() {
    return {
        list: []
    }
},

created: function() {
    this.fetchEventsList();
},

methods: {
    fetchEventsList: function() {
        this.$http.get('events', function(events) {
            this.list = events;
        }).bind(this);
    }
}

});

Answer 1

好吧，似乎你试图访问循环中的false属性。

list变量不包含列表/数组（对象）。 要迭代的数组是list对象的events属性。 所以list.events

此外，您希望访问循环中“当前”项（事件）的属性（标题）。 然后，您不必访问孔数组，而是访问当前元素。 event.title

替换模板块：

<template id="events-template">
    <div v-for="event in list.events">
        @{{event.title}}
    </div>    
</template>