【问题标题】：Find if item in collection with value exists查找集合中具有值的项目是否存在
【发布时间】：2016-04-12 08:59:31
【问题描述】：

首先，这是我非常简单的组件：

var RenewedLoanModal = new Vue ({
      el: '#myModal',
      data:
        {
          responses: []
        }
      });

responses 由 ajax 调用填充，它是一个对象数组。这是结构：

responses: [
    {error: 'foo', message: 'foo', id: 'foo', success: true},
    {error: 'bar', message: 'bar', id: 'bar', success: false},
    ...
]

我想知道其中一个对象是否有success: false，但无论如何我都没有找到。

有没有办法在一个方法中迭代 responses 集合，而不是在视图渲染中？或者也许是 v-if 测试？

【问题讨论】：

是的，有很多方法。最简单的方法是创建一个计算属性来进行检查。

标签： javascript vue.js

【解决方案1】：

有很多方法可以通过属性来检查一个项目是否存在于集合中。

纯 Javascript

您可以使用纯 javascript 做的第一件事如下：

var success = false
for (var i = 0; i < responses.lenth; i++) {
  if (responses[i].success === true) success = true
}

ECMAScript 6

你可以在 ES6 中这样做：

var success = responses.reduce((prev, cur) => prev || cur.success, false)

函数式编程

另一种更具声明性的方式是使用Ramda.js 库：

// if 'any' of the elements satisfy the predicate
var success = R.any(response => response.success === true)(responses)
// or more briefly
var success = R.any(response => response.success)(responses)

在 Vue.js 中连接它

创建具有上述返回结果的计算属性后，如果您想有条件地显示某些内容，可以将其连接到 v-if 或 v-show。

【讨论】：

【解决方案2】：

如果可能的话，我会使用：

data: { hadError: false, responses: [] } 并让 addResponse(data, resp) 完成这项工作： if(resp.success === false) data.hadError = true; data.responses.push(resp);

否则： for(i=0; i<responses.length; i++) { if(response[i].success === false) ..... }

【讨论】：