Hey everyone! I'm a Vue.js newbie trying to build an anime list app to practice. I'm using an anime API but can't get the titles to show up. It's driving me nuts!
Here's what I've got so far:
My main page:
```vue
<template>
<div class="anime-list">
<h1>Trending Anime</h1>
<div class="grid">
<AnimeCard v-for="show in shows" :key="show.id" :showData="show"/>
</div>
</div>
</template>
<script setup>
import AnimeCard from "../components/AnimeCard.vue";
import { onMounted, ref } from "vue";
const shows = ref([])
onMounted(() => {
const apiUrl = 'https://anime-api.example.com/shows?limit=10';
const headers = {
'api-key': 'my-secret-key-1234',
'api-host': 'anime-api.example.com'
};
fetch(apiUrl, { headers })
.then(res => res.json())
.then(data => {
shows.value = data.results
})
.catch(err => console.error('Oops! API fetch failed', err))
})
</script>
And my AnimeCard component:
<template>
<div class="card">
<h2>{{ showData.shows.name }}</h2>
</div>
</template>
<script setup>
defineProps({
showData: Object
})
</script>
I’ve tried tweaking the
and messing with the fetch stuff, but no luck. Any ideas what I’m doing wrong? Thanks!
I ran into a similar issue when I was getting started with Vue and API integration. The problem is likely in your AnimeCard component. Based on your main page setup, it looks like the ‘showData’ prop is receiving the entire show object, not just the ‘shows’ property.
Try changing your AnimeCard template to:
<template>
<div class="card">
<h2>{{ showData.name }}</h2>
</div>
</template>
This assumes the API response structure has a ‘name’ property directly on each show object. If it’s nested differently, you might need to adjust accordingly.
Also, double-check your API response structure in the browser’s network tab or by console.logging ‘data’ in your fetch response. Sometimes, APIs return data in unexpected formats, and you might need to access it differently, like ‘data.shows’ instead of ‘data.results’.
Hope this helps you get those titles showing up!
hey mate, i think ur using wrong prop access. it should be {{ showData.name }} if your API is returning the show object. check your fetch output with console.log too. good luck!
I’ve encountered this issue before when working with external APIs. The problem likely stems from how you’re accessing the data in your AnimeCard component. Given that you’re passing the entire ‘showData’ object as a prop, you should access the name directly without the ‘shows’ property.
Try modifying your AnimeCard template like this:
<template>
<div class="card">
<h2>{{ showData.name }}</h2>
</div>
</template>
Additionally, it’s worth logging the ‘shows’ data in your main component to verify the structure of the API response. Sometimes, the data might be nested differently than expected. If you’re still having trouble, consider using Vue DevTools to inspect your component props and data flow. This can be invaluable for debugging these kinds of issues.