Vue.js 2实现仅在errors存在值时显示指定div的方法

你的问题核心是**errors是对象类型，而非数组**，对象本身没有length属性，所以v-show="errors.length"会因errors.length返回undefined（被v-show判定为false），导致无法正确触发显示。以下是几种可行的调整方式：

1. 直接在v-show中使用对象值判断 #

将v-show的条件改为检查errors对象中是否存在非空的错误数组：

<div v-show="Object.values(errors).some(arr => arr.length > 0)">
  <!-- 错误提示内容 -->
</div>

• Object.values(errors)：把errors对象的所有属性值（即各个字段的错误数组）转换成一个新数组
• .some(arr => arr.length > 0)：检查这个数组中是否存在至少一个长度大于0的子数组（即存在有效错误）

2. 封装计算属性（推荐） #

如果需要多次判断错误状态，建议封装一个计算属性，让代码更清晰易维护：

// 组件的computed选项中
computed: {
  hasFormErrors() {
    // 遍历errors的所有值，判断是否有非空的错误数组
    return Object.values(this.errors).some(errorArr => errorArr.length > 0)
  }
}

然后在模板中使用：

<div v-show="hasFormErrors">
  <!-- 错误提示内容 -->
</div>

3. 额外判断对象属性数量（可选） #

如果担心后端返回空对象（无任何错误属性），可以叠加判断对象的属性数量：

<div v-show="Object.keys(errors).length > 0 && Object.values(errors).some(arr => arr.length > 0)">
  <!-- 错误提示内容 -->
</div>

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