up vote 0 down vote favorite

I have the following json:

[{id: 3,
pais: "Chile",
fuso_atual: "-3",
fuso_api: "-7200",
dst: "1",
dst_start: "1476586800",
dst_end: "1487469599",
created_at: null,
updated_at: "2016-12-11 19:19:11"
}]

and I want to access this properties, but without using v-for or something like this, I want a simple access (in my html) like {{paises[0].pais}}, but when I try this, I get an error "Cannot read property 'pais' of undefined(…)"

My component:

var getTimeZone = {

    template: '#time-zone-list-template',

    data: function(){
        return {
            paises: []
        }
    },

    created: function(){
        this.getTimeZone2();
    },

    methods: {
        getTimeZone2: function(){
            this.$http.get('api/paises').then((response) => {
                this.paises = response.body;
            }); 
        } 
    }

};  

var app = new Vue({
    el: '#app',

    components: {
        'time-zone-list': getTimeZone
    }

});

My html:

<div id="app">
    <time-zone-list></time-zone-list>
</div>

<template id="time-zone-list-template">
    <div class="time-and-date-wrap">    
        {{ paises[0].pais }}
    </div>
</template>

Any idea?

edit: I can access {{ paises[0] }} with success, but not .pais

edit2: If I use v-for I can navigate in the inside properties

Thanks

share|improve this question
    
Show your code. Here is a jsfiddle with array index access working: jsfiddle.net/sru0wuf3 – rogeriolino Dec 12 '16 at 20:45
    
It's probabbly because data from server is not yet fetched, so you are getting that paises is not defined.Solution should be wrap everything in div and set directive v-if="paises" – Belmin Bedak Dec 12 '16 at 21:20
    
@BelminBedak I tried this approach, but didn't work. I can access the array, but I can´t navigate in the inside properties – Hermes Martins Dec 12 '16 at 21:42
    
Okay, what if you change this this.paises = response.body; to this this.paises = response.json(); – Belmin Bedak Dec 12 '16 at 21:46
    
Or response.data – El_Matella Dec 12 '16 at 21:47
up vote 0 down vote accepted

Jeff Mercado's answer in the comment correctly describes why this fails.

You could add a computed property like this...

var getTimeZone = {

    template: '#time-zone-list-template',

    data: function(){
        return {
            paises: []
        }
    },

    created: function(){
        this.getTimeZone2();
    },

    computed: {
        elPrimerPais: function() {
            return this.paises.length > 0 ? this.paises[0].pais : '';
        }
    },

    methods: {
        getTimeZone2: function(){
            this.$http.get('api/paises').then((response) => {
                this.paises = response.body;
            }); 
        } 
    }

};

Then in your template you can do this..

<template id="time-zone-list-template">
    <div class="time-and-date-wrap">    
        {{ elPrimerPais }}
    </div>
</template>
share|improve this answer
    
Thanks jessegavin! I have had a time to tested today and it worked. – Hermes Martins Dec 15 '16 at 16:50
up vote 0 down vote

I found another solution =>>> v-if="paises.length" this solved my problem =]

var getTimeZone = {

    template: '#time-zone-list-template',

    data: function(){
        return {
            paises: []
        }
    },

    created: function(){
        this.getTimeZone();
    },

    methods: {
        getTimeZone: function(){
            this.$http.get('api/paises').then((response) => {
                this.paises = response.body;
            }); 
        } 
    }

};

Then in my template

<template id="time-zone-list-template">
    <div class="time-and-date-wrap" v-if="paises.length">    
        {{ paises[0].pais }}
    </div>
</template>
share|improve this answer

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.