vue.js - 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>

标签： vue.js

Answer 1

尝试检查对象属性（对象）是否为空：

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>