VUE 3显示获取数据v-for

Question

因此，我正在创建一个口袋妖怪应用程序，我想使用API​​使用API​​显示口袋妖怪名称：。 我正在对API进行提取请求，然后在模板中显示口袋妖怪名称。当我尝试仅显示1个口袋妖怪时，我有0个问题，但是当我尝试使用V-For显示所有口袋文件时，我会有此错误。 您是否知道为什么我会遇到此错误？ net/uo2l8.png“ alt =”在此处输入图像说明”>

<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

我刚刚将您的代码粘贴到代码笔中，并删除了工作/不工作评论，并且代码运行并显示了名称。

也许问题在于安装此组件的父组件，或者分配：键属性
尝试：key =“'poke'+index.toString（）” ，但是我敢肯定，JS Handels String Integer Convats安静得很好。

您使用哪个版本的VUEJS？

从注释中编辑：

带有名称 pokemonlistvue 的父组件将已发布的组件导入为 pokemonlistvue ，导致命名冲突。重命名其中的任何一个都解决了这个问题。

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