如何仅当我的 API 在 Vuejs 上下文中返回字符串类型时显示"null" "Not connected"

Question

我给出了下面的代码，我的API返回"；空"；字符串类型，所以我想显示"；未连接"；当我的API返回空和"空"时；连接的"；如果我的API返回null以外的值。

<template>
<div class="api_data">
<span class="trick_ok" v-if="status === 'null'" >Not connected</span>
</div>
</template>
<script>
export default {
name: Api_data,
data () {
return {
status: []
}
},
created() {
this.$http.get('https://my_api_goes_here/doubt/')
.then((response) => { this.status = response.data })
.catch((error) => { console.log(error) })
}
}
</script>

我想要这背后的逻辑，因为我是Vuejs的新手，正如你所看到的，我已经给出了"；未连接"；直接不用胡子。由于我没有使用任何胡子，控制台显示无法加载资源。但是如果我使用｛｛status｝｝，它什么也不显示，因为我的API返回"；空"；字符串类型。

Answer 1

您可以使用三元运算符根据状态在连接和未连接的文本之间切换，而不是使用v-if(如果使用else span，则根据给定的代码，您的状态应为字符串和null类型，如果不是字符串，则只使用v-if="status"和v-else(：

<div class="api_data">
<span class="trick_ok">{{this.status=='connected'?'Connected':'Not connected'}}</span>
</div>