Vue 3 отображает выборку данных v-for
Итак, я создаю приложение Pokemon и хочу отображать имена покемонов с помощью API: https://pokeapi.co/api/v2/pokemon/.
Я делаю запрос на выборку в API, а затем отображаю имена покемонов в своем шаблоне. У меня 0 проблем, когда я пытаюсь отобразить только 1 покемона, но у меня возникает эта ошибка, когда я пытаюсь отобразить всех своих покемонов с помощью 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>
Ответы 1
Я только что вставил ваш код в Code Pen и удалил рабочие/нерабочие комментарии, и код запускается и показывает имена.
Возможно, проблема в родительском компоненте, куда этот компонент смонтирован, или в назначении атрибута :key
попробуйте :key="'poke'+index.toString()", но я почти уверен, что js хорошо обрабатывает целочисленные конкаты строк.
Какую версию vuejs вы используете?
Изменить из комментариев:
Родительский компонент с именем PokemonListVue импортировал опубликованный компонент как PokemonListVue, что привело к конфликту имен. Переименование любого из них решает проблему.
В опубликованном сообщении об ошибке в строке 3 написано at formatComponentName это хороший совет.
Вы монтируете свой компонент или код, который вы разместили, является вашим корневым компонентом (app.vue)? Может быть, вы можете поделиться кодом, в котором используется опубликованный вами компонент.
Я попробовал ваш код в отдельном проекте, и он тоже работает, я думаю, что с самим компонентом проблем нет. Кстати: ^ в package.json означает как минимум версию 3.2.13, чтобы узнать, какая версия на самом деле установлена, загляните в package-lock.json. Но эфиром я пробовал 3.2.13 и 3.2.25 и код работает
Большое спасибо за ваше время и ваши ответы. Я не очень понимаю, что происходит, если код работает на вашем компьютере. Итак, мой код — это компонент, который я включаю в такое представление: <template> <PokemonListVue></PokemonListVue> </template> <script> import PokemonListVue from "@/components/PokemonList.vue"; export default{ name: PokemonListVue, components: { PokemonListVue } } </script> <style> </style>
хорошо, на основании вашего комментария вы импортируете компонент с именем PokemonListVue из PokemonList, а компонент, в который вы его импортируете и используете, имеет указанное имя PokemonListVue, что может быть конфликтом. Попробуйте переименовать любой
Это сработало .. Мне очень жаль за неудобства. Я занимаюсь этой проблемой уже несколько дней. Большое спасибо за ваше время и вашу помощь. Хорошего дня и извините еще раз.
Нет проблем, я знаю это чувство!
Большое спасибо за ваш ответ, я очень удивлен, что мой код работает на codepen. Я должен был попробовать это. Моя версия vue: "vue": "^3.2.13" Я пытался использовать .toString(), но не работал.