Vue计算属性forEach循环无法返回true，如何实现预期判断？

在Vue.js中编写了计算属性infoExists，用来控制页面元素显示，需要遍历父对象的子对象，判断是否存在包含item.info的项。

预期功能 #

• 只要有一个子对象包含item.info，就返回true并终止循环
• 页面加载期间保持返回true的状态

实际异常 #

• 能正确遍历所有子对象，也能正确识别包含item.info的项
• 找到目标项后仍会继续遍历所有元素
• 函数始终无法返回true，若在循环外添加return false则一直返回false

页面使用代码 #

<div v-if="infoExists">Some Stuff Here</div>

计算属性代码 #

infoExists() {
  console.log('infoExists') // 能正常打印

  Object.values(this.set.items).forEach( (item) => {
    console.log(item) // 能正确打印item，即使之前已经找到含item.info的项，仍会继续打印所有item
    if (item.info) {
      console.log('has info') // 找到含info的项时能正确打印
      return true; // 期望在此终止循环并让函数返回true
    }
  } );

   // return false; // 取消注释后会一直返回false
},

需求 #

修改代码实现：

• 判断是否存在包含item.info的子对象
• 存在则返回true，不存在则返回false

问题出在forEach方法的特性上：forEach的回调函数里的return只是跳出当前这一次的回调执行，不会终止整个forEach循环，也不会让外层的计算属性函数返回值。所以你在回调里return true根本不会影响外层函数的返回结果，外层函数最后没有return语句的话默认返回undefined，Vue会把undefined当作false处理。

最适合这个需求的是数组的some()方法，它的作用就是遍历数组，只要有一个元素满足条件就立即返回true，并且终止遍历；如果所有元素都不满足，就返回false，完全匹配你的需求。

修改后的计算属性代码：

infoExists() {
  console.log('infoExists')
  // 使用some()替代forEach
  return Object.values(this.set.items).some(item => {
    console.log(item)
    return item.info; // 只要item.info存在（非空/非undefined等）就返回true
  })
}

如果需要兼容不支持some()的旧环境，也可以用普通的for循环：

infoExists() {
  console.log('infoExists')
  const items = Object.values(this.set.items)
  for (let i = 0; i < items.length; i++) {
    const item = items[i]
    console.log(item)
    if (item.info) {
      console.log('has info')
      return true; // 这里的return会直接终止循环并让函数返回true
    }
  }
  // 遍历完所有元素都没找到，返回false
  return false
}

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