[Vuejs]-Json response vue

by

3👍

✅

I believe is async request, so when you try to show location.name on render, the location is not loaded yet.

So i think you must to add v-if, and this span will render after props.feed will loaded

<span v-if="props.feed.location" 
     :class="{ 'light-text': isDarkMode, 'dark-text': !isDarkMode }"
>{{ props.feed.location.name }}</span>

or if you need to show span even if is not loaded, you can add computed 

<span :class="{ 'light-text': isDarkMode, 'dark-text': !isDarkMode }">locationName>

<script>
export default {
    computed: {
        locationName() {
            return props.feed && props.feed.location ? props.feed.location.name : "";
        }
    }
}

👤user2042869

1👍

In the second object of the data array, location is actually null

As suggested by @depperm, you can do something like:

{{ props.feed.location ? props.feed.location.name : '' }}

or, as I prefer:

<span v-if="props.feed && props.feed.location">
  {{ props.feed.location.name }}
</span>
👤niccord

Leave a comment