json - 如何使用 VUE 显示来自 API 的 JSON 数据

Question

如何显示从这个 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/" }

Answer 1

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

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