VUEJS使用v-if判断JSON对象是否为空时length属性失效如何解决

问题根因 #

FlightElements.modulenames 是普通JS对象，而非数组或字符串类型，原生对象默认没有length属性，所以你直接访问该属性会得到undefined，布尔判断时永远为假，导致原有逻辑完全不生效。此外原有代码的判断逻辑也写反了：!length实际代表无长度，对应你要的空对象场景，和你注释的逻辑刚好相反。

修复方案 #

可以通过 Object.keys() 方法获取对象所有可枚举键名组成的数组，再通过该数组的length属性判断对象是否为空：

方案1：直接在模板内判断（适合简单场景） #

修改后的模板代码如下：

<!-- moduleType为LONG且modulenames非空时显示 -->
<div class="display-container" v-if='moduleType=="LONG" && Object.keys(FlightElements.modulenames).length > 0'>
  <p>Display Modules</p>
</div>

<!-- moduleType为LONG且modulenames为空时显示 -->
<div class="display-container" v-if='moduleType=="LONG" && Object.keys(FlightElements.modulenames).length === 0'>
  <p>Display Empty Modules</p>
</div>

如果接口返回可能存在FlightElements或modulenames未定义的情况，建议加可选链和空值合并做兜底，避免渲染报错：

Object.keys(FlightElements?.modulenames ?? {}).length

方案2：封装为计算属性（适合复用、复杂场景） #

先在Vue实例的computed选项中定义判断逻辑：

computed: {
  // 判断modulenames是否为空
  isModuleNamesEmpty() {
    return Object.keys(this.FlightElements?.modulenames ?? {}).length === 0
  },
  // 判断是否为LONG类型模块
  isLongModule() {
    return this.moduleType === 'LONG'
  }
}

然后模板直接调用计算属性即可，可读性更高：

<div class="display-container" v-if='isLongModule && !isModuleNamesEmpty'>
  <p>Display Modules</p>
</div>

<div class="display-container" v-if='isLongModule && isModuleNamesEmpty'>
  <p>Display Empty Modules</p>
</div>

内容的提问来源于stack exchange，提问作者WTE