[FIXED] how can I deal with null errors in axios and vue

Issue

Axios and Vuejs

I am receiving data from the api, but some items are null, and I get a message on the console, how can I deal with these errors

I tried to make a filter but it didn't work.

link: App

Solution

It would help if you could post some of your code from your Vue component, but there are many ways to deal with this. In general, you need to check for the value before displaying. Below are a couple of ways you could do this with Vue.

One way is using v-if. If the network is not null, show the network

<div v-if="show.network">{{ show.network }}</div>

You could also use a v-else directive to display something else

<div v-if="show.network">{{ show.network }}</div>
<div v-else>network unavailable</div>

Another way is to use a computed property.

<template>
    <div>
        <div>{{ network }}</div>
    </div>
</template>

<script>
export default {
    data: function() {
        return {
            show: {
                network: null
            }
        }
    },
    computed: {
        network() {
            return ( this.show.network ) ? this.show.network : "not available";
        }
    }
};
</script>

The list goes on... As the developer, you will need to check the value to determine if it can be shown before displaying it.

Answered By - Chris

Answer Checked By - Gilberto Lyons (PHPFixing Admin)