javascript - 如何在 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 资源（通过 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

好的，您似乎尝试访问循环中的错误属性。

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

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

替换您的模板块：

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