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

Question

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

 x y z   
 0 0 0  
 2 2 2  
 3 3 3  
 5 5 5  
 1 Nan 10  
 4 Nan 20

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

当前正在显示：

<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>

Answer 1

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

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