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

【问题标题】：How to access a JSON value with Vue.js without using v-for如何在不使用 v-for 的情况下使用 Vue.js 访问 JSON 值
【发布时间】：2017-04-27 19:20:38
【问题描述】：

我有以下 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}}，但是当我尝试这个时，我收到一个错误“无法读取 undefined(...) 的属性 '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>

有什么想法吗？

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

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

谢谢

【问题讨论】：

显示您的代码。这是一个数组索引访问工作的 jsfiddle：jsfiddle.net/sru0wuf3
这可能是因为尚未从服务器获取数据，所以您得到 paises 未定义。解决方案应将所有内容包装在 div 中并设置指令 v-if="paises"
@BelminBedak 我尝试了这种方法，但没有奏效。我可以访问数组，但无法在内部属性中导航
好的，如果你把这个this.paises = response.body;改成这个this.paises = response.json();怎么办
或response.data

标签： json vue.js vue-component

【解决方案1】：

我找到了另一个解决方案 =>> 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>

【讨论】：

【解决方案2】：

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>

【讨论】：

谢谢杰西加文！我今天有时间进行了测试，它奏效了。