I’m working on a Vue.js project where I need to fetch anime data from an external API and display it in cards. The API call seems to work but the titles aren’t showing up on the page.
The problem’s probably how you’re accessing the title in your ShowCard component. You’re using showData.shows.name but that doesn’t match what most anime APIs actually return. They usually have properties like title, name, or sometimes nest them under different keys. First thing I’d do is log the actual data structure. Just add console.log(result) right after your fetch and see what you’re actually getting back. Then fix your template based on that - it might be showData.title or showData.attributes.title depending on the API. Also double-check that your API key’s valid and the data array is actually getting populated.
Your problem’s in the property path. The line {{ showData.shows.name }} is trying to access a nested shows property that doesn’t exist in your data structure. Most anime APIs just return objects with direct properties like title or name at the root level.
I’ve worked with similar APIs - they don’t structure data the way you’re expecting. Stop guessing the property names and add some debugging right after your fetch succeeds. Try console.log('API response:', result) and console.log('First item:', result.data[0]) to see exactly what properties you’ve got.
Once you see the actual structure, fix your ShowCard template. It’s probably just {{ showData.title }} or {{ showData.name }} without that extra .shows part.
you’re accessing showData.shows.name but that’s not the right structure for this api. anime-db returns objects with a title property directly - there’s no shows nesting. change your card template to {{ showData.title }} instead. also check if your api key’s still valid. rapidapi keys expire and you’ll just get empty arrays when they do.