Vue 3 显示获取数据 v-for

Question

因此，我正在创建一个 Pokemon 应用程序，我想使用 api 显示 pokemon 名称：https://pokeapi.co/api/v2/pokemon/。我在 api 上执行获取请求，然后在我的模板中显示 pokemon 名称。当我尝试仅显示 1 个口袋妖怪时出现 0 个问题，但是当我尝试使用 v-for 显示我的所有口袋妖怪时出现此错误。你知道我为什么会遇到这个错误吗？

<template>
    <p class="dark:text-white"> {{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>

Answer 1

我刚刚将您的代码粘贴到代码笔中并删除了 working/not 工作注释，代码运行并显示了名称。

可能问题出在挂载该组件的父组件，或者:key属性的赋值尝试 :key="'poke'+index.toString()"，但我很确定 js handels 字符串整数连接很安静。

你用的是哪个版本的vuejs？

根据评论编辑：

名称为 PokemonListVue 的父组件将发布的组件导入为 PokemonListVue，这导致了命名冲突。重命名其中一个即可解决问题。

在发布的错误消息中，第 3 行说 at formatComponentName 这是一个很好的提示。

Vue 3 显示获取数据 v-for

Vue 3 display fetch data v-for

vue.js

fetch

vuejs3