Inquiry from a beginner.
My goal is to display the name of a city using props.
When I use {{ props.feed.location }} to fetch:
{ "latitude": 50.85, "longitude": 4.35, "name": "Brussels, Belgium", "id": 213633143 }
However, when I attempt {{ props.feed.location.name }} to explicitly print the city name, it triggers a JS error:
Error in render: "TypeError: Cannot read property 'name' of null"
found in
---> <VueInstagram>
<Insta> at src/components/Insta.vue
<Home> at src/views/Home.vue
<App> at src/App.vue
<Root>
Any suggestions? Thank you!!
Code
<template v-slot:feeds="props" class="row">
<div class="col-12">
<li class="fancy-list card list-unstyled">
<div class="innerinfo row">
<div class="col-4">
<a v-bind:href="props.feed.link">
<img
class="img-fluid rounded"
v-bind:src="props.feed.images.standard_resolution.urlNOT"
/>
</a>
</div>
<div class="col-8">
<span class="likes row align-items-center">
<font-awesome-icon
icon="heart"
class="mr-2"
:class="{ 'light-text': isDarkMode, 'dark-text': !isDarkMode }"
/>
<h5
:class="{ 'light-text': isDarkMode, 'dark-text': !isDarkMode }"
>{{ props.feed.likes.count }}</h5>
</span>
<span
:class="{ 'light-text': isDarkMode, 'dark-text': !isDarkMode }"
>{{ props.feed.location.name }}</span>
</div>
</div>
</li>
</div>
</template>
Feed response:
[Sample data here]
I aim to access the city within the location object. Everything else works fine such as links and likes, except for printing the city name specifically. However, printing just the location itself functions correctly.