我该如何处理axios和vue中的空错误

Question

Axios和Vuejs

我正在从api接收数据， 但有些项目为空， 我在控制台上收到一条消息， 我该如何处理这些错误

我试图做一个过滤器，但是没有用。

链接：App

Answer 1

如果您可以从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>

另一种方法是使用computed属性。

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

列表继续显示...作为开发人员，您需要在显示值之前检查该值以确定是否可以显示它。

Answer 2

在您的模板中，您可以使用以下代码：

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

所有浏览器均不支持?，因此以下内容将始终有效：

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