how to display nested objects in vue.js

Question

My returned data is an array of objects with a nested object. I'm unable to display the 'events' in a v-for loop in my template as I cannot seem to access that part of the returned data.

The data is returned like this (from 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"

Using Vue-resource (via CDN) how do I get display just the events in my template?

Template:

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

My application:

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);
    }
}

});

can you add the json of the list variable to your question? — Fiete
– Fiete, Commented Jan 31, 2016 at 19:21
@Fiete I'm not entirely sure what you mean; however I've rewritten the first code block to match the exact response shown in Vue DevTools — Mike Thrussell
– Mike Thrussell, Commented Jan 31, 2016 at 19:37

Fiete · Accepted Answer · 2016-01-31 19:46:58Z

3

Ok it seems you try to access the false properties in your loop.

the list variable does not contain a list/array (object). The array you want to iterate is the events attribute of the list object. so list.events

Furthermore you want to access the property (title) of the "current" item (event) in the loop. Then you don't have to access to the hole array but rather to the current element. event.title

Replace your template block:

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

answered Jan 31, 2016 at 19:46

Fiete

1,34211 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

how to display nested objects in vue.js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related