I’m trying to learn Vue.js. I’m new and I’ve started making a clone of MyAnimeList to practice. I’m attempting to display the title, but nothing seems to be working. Can someone help me, please?
Here’s the API link: https://rapidapi.com/felixeschmittfes/api/myanimelist
this is the page
<template>
<div class="topAnime">
<h1>Top anime</h1>
<div class="card">
<CardComponent v-for="anime in animes" :key="anime.id" :animeInfo="anime"/>
</div>
</div>
</template>
<script setup>
import CardComponent from "../components/CardComponent.vue";
import { onMounted, ref } from "vue";
const animes = ref([])
onMounted(() => {
const url = 'https://anime-db.p.rapidapi.com/anime?page=1&size=10';
const options = {
method: 'GET',
headers: {
'x-rapidapi-key': '5ba5251626msh61775206ad42e40p1981dbjsn73e0574f7887',
'x-rapidapi-host': 'anime-db.p.rapidapi.com'
}
}
fetch(url, options)
.then((response) => response.json())
.then((data) => {
animes.value = data.contents
})
.catch((error) => console.error('problem fetching the videos', error))
})
</script>
<style scoped>
a {
color: black;
text-decoration: none;
}
</style>
this is the card component
<template>
<div class="">
<h2>{{ animeInfo.animes.title }}</h2>
</div>
</template>
<script setup>
defineProps ({
animeInfo: Object
})
</script>
<style scoped>
</style>
I tried multiple things with and Fetch to see if I made a mistake, but I didn’t succeed.