如何在不使用 v-for 的情况下使用 Vue.js 访问 JSON 值

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-for 或类似的东西，我想要一个简单的访问（在我的 html 中），比如 {{paises[0].pais}}，但是当我尝试这个时，我得到一个错误 "Cannot read property 'pais' of undefined(…)"

我的组件：

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>

有什么想法吗？

编辑：我可以成功访问 {{ paises[0] }}，但不能访问 .pais

edit2：如果我使用 v-for 我可以在内部属性中导航

谢谢

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>

如何在不使用 v-for 的情况下使用 Vue.js 访问 JSON 值

How to access a JSON value with Vue.js without using v-for

json

vue.js

vue-component