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

Posted 2023-02-23

【中文标题】如何在不使用 v-for 的情况下使用 Vue.js 访问 JSON 值

【英文标题】：How to access a JSON value with Vue.js without using v-for

【发布时间】：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

【参考方案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>

【讨论】：

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