Vue 3 отображает выборку данных v-for

Итак, я создаю приложение Pokemon и хочу отображать имена покемонов с помощью API: https://pokeapi.co/api/v2/pokemon/. Я делаю запрос на выборку в API, а затем отображаю имена покемонов в своем шаблоне. У меня 0 проблем, когда я пытаюсь отобразить только 1 покемона, но у меня возникает эта ошибка, когда я пытаюсь отобразить всех своих покемонов с помощью v-for. У вас есть идеи, почему я встречаю эту ошибку? enter image description here

<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>
Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Flatpickr: простой модуль календаря для вашего приложения на React
Flatpickr: простой модуль календаря для вашего приложения на React
Если вы ищете пакет для быстрой интеграции календаря с выбором даты в ваше приложения, то библиотека Flatpickr отлично справится с этой задачей....
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Что такое cURL в PHP? Встроенные функции и пример GET запроса
Что такое cURL в PHP? Встроенные функции и пример GET запроса
Клиент для URL-адресов, cURL, позволяет взаимодействовать с множеством различных серверов по множеству различных протоколов с синтаксисом URL.
Четыре эффективных способа центрирования блочных элементов в CSS
Четыре эффективных способа центрирования блочных элементов в CSS
У каждого из нас бывали случаи, когда нам нужно отцентрировать блочный элемент, но мы не знаем, как это сделать. Даже если мы реализуем какой-то...
0
0
27
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я только что вставил ваш код в Code Pen и удалил рабочие/нерабочие комментарии, и код запускается и показывает имена.

Возможно, проблема в родительском компоненте, куда этот компонент смонтирован, или в назначении атрибута :key попробуйте :key="'poke'+index.toString()", но я почти уверен, что js хорошо обрабатывает целочисленные конкаты строк.

Какую версию vuejs вы используете?

Изменить из комментариев:

Родительский компонент с именем PokemonListVue импортировал опубликованный компонент как PokemonListVue, что привело к конфликту имен. Переименование любого из них решает проблему.

В опубликованном сообщении об ошибке в строке 3 написано at formatComponentName это хороший совет.

Большое спасибо за ваш ответ, я очень удивлен, что мой код работает на codepen. Я должен был попробовать это. Моя версия vue: "vue": "^3.2.13" Я пытался использовать .toString(), но не работал.

FeckNeck 17.05.2022 14:43

Вы монтируете свой компонент или код, который вы разместили, является вашим корневым компонентом (app.vue)? Может быть, вы можете поделиться кодом, в котором используется опубликованный вами компонент.

Fabian Lehmann 17.05.2022 15:06

Я попробовал ваш код в отдельном проекте, и он тоже работает, я думаю, что с самим компонентом проблем нет. Кстати: ^ в package.json означает как минимум версию 3.2.13, чтобы узнать, какая версия на самом деле установлена, загляните в package-lock.json. Но эфиром я пробовал 3.2.13 и 3.2.25 и код работает

Fabian Lehmann 17.05.2022 15:12

Большое спасибо за ваше время и ваши ответы. Я не очень понимаю, что происходит, если код работает на вашем компьютере. Итак, мой код — это компонент, который я включаю в такое представление: <template> <PokemonListVue></PokemonListVue> </template> <script> import PokemonListVue from "@/components/PokemonList.vue"; export default{ name: PokemonListVue, components: { PokemonListVue } } </script> <style> </style>

FeckNeck 17.05.2022 15:15

хорошо, на основании вашего комментария вы импортируете компонент с именем PokemonListVue из PokemonList, а компонент, в который вы его импортируете и используете, имеет указанное имя PokemonListVue, что может быть конфликтом. Попробуйте переименовать любой

Fabian Lehmann 17.05.2022 15:29

Это сработало .. Мне очень жаль за неудобства. Я занимаюсь этой проблемой уже несколько дней. Большое спасибо за ваше время и вашу помощь. Хорошего дня и извините еще раз.

FeckNeck 17.05.2022 15:46

Нет проблем, я знаю это чувство!

Fabian Lehmann 17.05.2022 16:04

Другие вопросы по теме