CODEWITHSUNDEEP
javascriptvue.jsaxios
Eduardo Silva
Eduardo Silva

Reputation: 25

how can I deal with null errors in axios and vue

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

enter image description here

enter image description here

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

link: App

Upvotes: 0

Views: 901

Answers (2)

Chris
Chris

Reputation: 4810

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.

Upvotes: 1

andsilver
andsilver

Reputation: 5982

From your template, you can use this code:

<p><span>Network: </span>{{ result.show?.network?.name || '' }}</p>

All browsers dont support ? so below will always works:

<p><span>Network: </span>{{ result.show && result.show.network && result.show.network.name }}</p>

Upvotes: 1

Related Questions