Vue 3 display fetch data v-for-CodePudding

So, I'm creating a Pokemon application and I would like to display the pokemon names using the api :

<template>
    <p > {{pokemons[0].name}} </p> //working
    <div v-for="(pokemon, index) in pokemons" :key="'poke' index"> //not working...
        {{ pokemon.name }} 
    </div>
</template>

<script>
const apiURL = "https://pokeapi.co/api/v2/pokemon/"
export default {
    data(){
        return{
            nextURL:"",
            pokemons: [],
        };
    },
    created(){
        this.fetchPokemons();
    },
    methods:{
        fetchPokemons(){
            fetch(apiURL)
            .then( (resp) => {
                if(resp.status === 200){
                    return resp.json();
                }
            })
            .then( (data) => {
                console.log(data.results)
                // data.results.forEach(pokemon => {
                //     this.pokemons.push(pokemon)
                // });
                // this.nextURL = data.next;
                this.pokemons = data.results;
                console.log(this.pokemons);
            })
            .catch( (error) => {
                console.log(error);
            })
        }
    }
}
</script>

<style>

</style>

CodePudding user response：

I've just pasted your code into a Code Pen and removed the working/not working comments and the code runs and shows the names.

Maybe the problem is in the parent component where this component is mounted, or the assignment of the :key attribute try :key="'poke' index.toString()", but I'm pretty sure js handels string integer concats quiet well.

Which version of vuejs do you use?

Edit from comments:

The parent component with the name PokemonListVue imported the posted component as PokemonListVue which resulted in a naming conflict. Renaming either one of those solves the issue.

In the error message posted, in line 3 it says at formatComponentName this is a good hint.