как я могу справиться с нулевыми ошибками в ax ios и vue

Question

Ax ios и Vuejs

Я получаю данные из api, но некоторые элементы имеют значение null, и я получаю сообщение на консоли, как я могу справиться с этими ошибками

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

link: Приложение

Answer 1

Из вашего шаблона вы можете использовать этот код:

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

Все браузеры не поддерживают ?, поэтому всегда будет работать следующее:

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

Answer 2

Было бы полезно, если бы вы могли опубликовать часть своего кода из своего Vue компонента, но есть много способов справиться с этим. В общем, вам нужно проверить значение перед отображением. Ниже приведены несколько способов сделать это с помощью Vue.

Один из способов - использовать v-if . Если сеть не нулевая, покажите сеть

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

Вы также можете использовать директиву v-else , чтобы отобразить что-то еще

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

Другой способ - чтобы использовать свойство вычисленное .

<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>

Список продолжается ... Как разработчик, вам нужно будет проверить значение, чтобы определить, может ли оно отображаться, прежде чем отображать его.