どのようにV-ため

Question

を使用せずにVue.jsでJSON値にアクセスする私は、次の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-ためか、このようなものを使用せずに、私は{{paises [0] .pais}}のような簡単なアクセスが必要ですが、これを試してみると "未定義（...）のプロパティ 'pais'を読むことができません"

私コンポーネント：

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> 

編集：私はV-に使用する場合、私は

おかげ

内部プロパティに移動できます。私は

EDIT2を.pais成功して{{paises [0]}}にアクセスすることはできませんが

Answer 1

コメントのJeff Mercadoの答えは、なぜこれが失敗するのかを正確に説明しています。

あなたはこのように計算されたプロパティを追加することができます...

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>