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

Question

我返回的数据是一个包含嵌套对象的对象数组。我无法在模板的 v-for 循环中显示 'events'，因为我似乎无法访问返回数据的那部分。

返回的数据是这样的（来自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

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

list 变量不包含 list/array (object)。您要迭代的数组是 list object 的 events 属性。所以 list.events

此外，您想访问循环中 "current" 项（事件）的属性（标题）。然后您不必访问 hole 数组，而是访问当前元素。 event.title

替换您的模板块：

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

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

how to display nested objects in vue.js

javascript

nested

object

vue.js

vue-resource