current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 6.5 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 0 down vote favorite

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

});
share|improve this question
    
can you add the json of the list variable to your question? – Fiete Jan 31 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 Jan 31 at 19:37
up vote 2 down vote accepted

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>
share|improve this answer
    
Perfect. Thank you! – Mike Thrussell Jan 31 at 19:52

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.