VUEJS - V-if检查JSON对象是否为空

Question

这是我们得到的JSON响应。缺少一些非常简单的VUEJS逻辑来满足我们的需求。

如果JSON对象为空，我们需要相应地显示DIV。但是，当我尝试使用长度函数时，它不起作用。有人能帮忙解决这个问题吗?

{
"moduleInfo": {
"moduleType": "LONG"
},
"FlightElements": {
"modulenames": {
"Ele1": "Flight Parts",
"Ele2": "Flight Wings"
}
}
}

<!-- If moduleType is LONG and "Modulesnames" are available -->
<div class="display-container" v-if='moduleType=="LONG" && !FlightElements.modulenames.length'>
<p>Display Modules</p>
<div>
<!-- If moduleType is LONG and "Modulesnames" is empty -->
<div class="display-container" v-if='moduleType=="LONG" && FlightElements.modulenames.length'>
<p>Display Empty Modules</p>
<div>

Answer 1

尝试检查对象属性(object)是否为空:

new Vue({
el: "#demo",
data() {
return {
mod:{
"moduleInfo": {"moduleType": "LONG"},
"FlightElements": {
"modulenames": {"Ele1": "Flight Parts","Ele2": "Flight Wings"}
}
},
mod1:{
"moduleInfo": {"moduleType": "LONG"},
"FlightElements": {
"modulenames": {}
}
}
}
}
})

Object.entries(objectToCheck).length === 0

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo" style="display: flex; gap: 1em;">
<div style="background: green;">
<div class="display-container" v-if='mod.moduleInfo.moduleType=="LONG" && Object.entries(mod.FlightElements.modulenames).length !== 0'>
<p>Display Modules</p>
</div>
<div class="display-container" v-if='mod.moduleInfo.moduleType=="LONG" && Object.entries(mod.FlightElements.modulenames).length === 0 '>
<p>Display Empty Modules</p>
</div>
</div>

<div style="background: red;">
<div class="display-container" v-if='mod1.moduleInfo.moduleType=="LONG" && Object.entries(mod1.FlightElements.modulenames).length !== 0'>
<p>Display Modules</p>
</div>
<div class="display-container" v-if='mod1.moduleInfo.moduleType=="LONG" && Object.entries(mod1.FlightElements.modulenames).length === 0 '>
<p>Display Empty Modules</p>
</div>
</div>
</div>

Answer 2

尝试使用lodash _isempty (value)

<!-- If moduleType is LONG and "Modulesnames" is empty -->
<div class="display-container" v-if='moduleType=="LONG" && _.isEmpty(FlightElements.modulenames)'>
<p>Display Empty Modules</p>
<div>

Answer 3

几点说明

Javascript中的json没有length属性。调用json.length总是返回undefined。然而，如果你有一个json数组，那么你就可以在它上面调用.length。

const json = { "key": "example" }
const array = [ { "key": "example1" }, { "key": "example2" } ]
console.log(json.length)
console.log(array.length)
// #=> undefined
// #=> 2

如果你想通过它的键来计算JSON的长度，你必须计算它有多少个键。

第二，您不必像makbeth的注释所指出的那样需要lodash，您应该能够简单地调用modulenames键。如果没有内容，则返回false。

以JSON为例:

const json = {
"user": { }
}

如果在If语句中调用json，它将返回true。然而，调用json.user将返回false。

if (json.user) {
console.log("Hello!")
} else {
console.log("Goodbye!")
}
// #=> Goodbye!

在我看来，假设你发布的代码是实际使用的，你根本没有在这里调用正确的JSON键。

首先需要将从API获取的JSON保存到一个变量中，然后才能正确访问这些键。

像这样:

<template>
<div v-if="data.moduleType === 'LONG' && data.FlightElements.moduleNames">
<p>Display Modules</p>
</div>
<div v-if="data.moduleType === 'LONG' && !data.FlightElements.moduleNames">
<p>Display Empty Modules</p>
</div>
</template>

<script>
export default {
data() {
return {
data = {}
}
},
methods: {
async fetchData() {
this.data = callApi();
}
}
}
</script>