Struggling to display titles from api (RapidAPI)
I'm trying to learn Vue.js and I've started making a clone of MyAnimeList to practice. I'm attempting to display titles from api in h2. Can someone help me, please 🙏 ?
Here's API screenshot (lightshot): https://prnt.sc/TWcfNnWIW2IR
Here's the API link: https://rapidapi.com/felixeschmittfes/api/myanimelist
Here's my code:
https://stackblitz.com/edit/vitejs-vite-vfxqxd?file=src%2Fviews%2FTopAnime.vue
MyAnimeList
Search animes using MyAnimeList, or get anime information by using the id of the anime.
9 Replies
You are using
router-link but you have not install vue-router
Fix this firstDone, thx
I don't know how you set up your code exactly, but it might be a case of you not iterating through the array
So for example you see that it returns to you an array of objects, so to display the first anime title, you'd have to call
array[0].title
You can do this in vanilla JS by doing something like this:
Now how to do that exactly in your Vue implementation, not sure... but hopefully this gives you a good starting point!
Took a quick dive into Vue! Figured it out 🙂 let me know if this helps you:
https://stackblitz.com/edit/vitejs-vite-mqewyz?file=src%2FApp.vue,src%2Fviews%2FTopAnime.vue,src%2Fcomponents%2FCardComponent.vue
You were really close; you were calling animeInfo.animes.title in your CardComponent.vue -- if you remove .animes.title, you'll see animeInfo already is the Object, so you can call animeInfo.title directly
This is because your animeInfo prop on CardComponent is an anime (which you've correctly iterated by using v-for="anime in animes" so it's an Object in the animes array (and not the array itself)omg thank you so much, I love you
Why does putting and in another HTML element fix my issue?
Nope but that's the way to do it on the docs
You have a list of titles so use the right tags
Vue.js
Vue.js - The Progressive JavaScript Framework
ok, I didn't know. Thank you 👍
yes mb
lol sorry if I came across as "stern" -- not my intention
no need to apologize
You made my day, and thanks to you, I'll learn from my mistake. So, even if it was your intention, it wouldn't have been a problem.