时间戳

首页 > 解决方案 > 如何使用 VUE 从 API 显示 JSON 数据

json - 如何使用 VUE 从 API 显示 JSON 数据

问题描述

如何显示从这个 Pokeapi 获得的口袋妖怪的名称：https ://pokeapi.co/

<template>

<div id="app">
    <div v-for="name in info">
        <span >{{ name }}</span>
    </div>  
</div>

</template> 

<script>
    export default {
    el: '#app',

    data () {
        return {
            info: [],
            loading: true,
            errored: false
        }
    },

    mounted () {
        axios

        .get('https://pokeapi.co/api/v2/pokemon/')

        .then(response => {
            this.info = response.data.results
        })

        .catch(error => {
            console.log(error)
            this.errored = true
        })

        .finally(() => this.loading = false)
    }
};
</script>

我希望能够显示例如名称 bulbasaur 和在 API 中提供的 url。

目前这正在显示：

{ "name": "bulbasaur", "url": "https://pokeapi.co/api/v2/pokemon/1/" }
{ "name": "ivysaur", "url": "https://pokeapi.co/api/v2/pokemon/2/" }
{ "name": "venusaur", "url": "https://pokeapi.co/api/v2/pokemon/3/" }
{ "name": "charmander", "url": "https://pokeapi.co/api/v2/pokemon/4/" }

标签： jsonapivue.jsaxios

解决方案

for 循环中的“名称”正在引用对象本身，因为 info 是一个对象数组。使用点表示法访问要显示的值。例如

<div id="app">
    <div v-for="pokemon in info">
        <span >{{ pokemon.name }}</span>
        <span >{{ pokemon.url }}</span>
    </div>  
</div>

推荐阅读