Как отобразить данные JSON из API с помощью VUE

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 и URL, который даетthe API.

В данный момент отображается:

{ "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 ссылается на сам объект, так как информация является массивом объектов. Используйте точечную запись для доступа к значению, которое вы хотите отобразить. например

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