Within my next component, I have the following structure:
<template>
<div class="home">
<div class="container" v-if="data" >
<Card v-for="result in data" :img="result.links[0]" :key="result.href"/>
</div>
</div>
</template>
<script>
import Card from "../components/Card";
import axios from "axios";
export default {
name: 'Home',
components: {Card},
data() {
return {
data: null,
}
},
created() {
axios.get('https://images-api.nasa.gov/search?q=mars').then(res => {
return res.data.collection.items
}).then(res => {
this.data = res;
})
}
}
Encountering an issue when attempting to render the Card component, as I am unable to pass the "img" prop. The console displays a "Cannot read properties of undefined (reading '0')" error. It's peculiar as the "data" property contains the correct information from the API. However, when making a request to the same API with a different query parameter like "https://images-api.nasa.gov/search?q=jupiter", everything functions properly. Unsure if this is a Vue internal matter or a problem with the API itself.