如何在vue.js中顯示嵌套對象

我返回的數據是一個包含嵌套對象的對象數組。我無法在模板的v-for循環中顯示'events'，因爲我似乎無法訪問返回數據的那部分內容。如何在vue.js中顯示嵌套對象

返回數據如下（從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); 
    } 
} 

});

來源

2016-01-31 Mike Thrussell

你可以在'list'變量的JSON添加到您的問題嗎？ – Fiete

@Fiete我不完全確定你的意思;但是我已經重寫了第一個代碼塊以匹配Vue DevTools –

好吧，看來你嘗試在你的循環訪問虛假性。

list變量不包含列表/數組（對象）。您要迭代的數組是list對象的events屬性。所以list.events

此外，您想要訪問循環中「當前」項目（事件）的屬性（標題）。然後，您不必訪問孔數組，而是訪問當前元素。 event.title

更換模板塊：

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

來源

2016-01-31 19:46:58 Fiete

Perfect中顯示的確切響應。謝謝！ –

如何在vue.js中顯示嵌套對象

回答

相關問題