Как получить доступ значение в формате JSON с Vue.js без использования v-за

Question

У меня есть следующие 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" 
}] 

, и я хочу, чтобы получить доступ к этой недвижимости, но без использования v-за или что-то подобное, Я хочу простой доступ (в моем html), например {{paises [0] .pais}}, но когда я попробую это, я получаю сообщение об ошибке «Не могу прочитать свойство« pais »неопределенного (...)»

My компонент:

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 
    } 

}); 

Мой 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> 

Любая идея?

редактировать: Я могу получить доступ к {{Países [0]}} с успехом, но не .pais

edit2: Если я использую V-для меня может перемещаться по внутренним свойствам

Благодаря

Answer 1

Ответ Джеффа Меркадо в комментарии правильно описывает, почему это не удается.

Вы могли добавить вычисляемое свойство, как это ...

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

}; 

Затем в шаблоне вы можете сделать это ..

<template id="time-zone-list-template"> 
    <div class="time-and-date-wrap">  
     {{ elPrimerPais }} 
    </div> 
</template> 

Answer 2

Я нашел другое решение = >>> v -if = "paises.length" это решило мою проблему =]

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

}; 

Тогда в моем шаблоне

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