Question

我返回的数据是一个带有嵌套对象的对象数组。我无法显示＆＃39;事件＆＃39;在我的模板中的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>

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

1 个答案: