过滤对象的Vuex状态数组返回空数组答案

【问题标题】：Filter Vuex state array of object returns empty array过滤对象的Vuex状态数组返回空数组
【发布时间】：2020-10-22 03:39:22
【问题描述】：

我有从https://jsonplaceholder.typicode.com/todos/ 接收数据的状态。我想根据状态completed:true 或completed:false 过滤数据。

而且我有以下方法来过滤数组：

filterByStatus(status) {
  const filteredResults = this.allTodos.filter(todo => todo.completed == status)
  console.log(filteredResults)
}

在这里，我收到true 或false 作为该方法的参数。但是console.log(filteredResults) 返回一个空数组。

filterByStatus(status) {
  let filteredResults = [];
  this.allTodos.map(item => {
    if (item.completed == status) {
      filteredResults.push(item);
    }
  });
  console.log(filteredResults);
}

我也尝试过 map 方法，但结果是一个空数组。

我有console.log(this.allTodos) 结果是：

 [{…}, {…}, {…}, {…}, {…}, __ob__: Observer]

这是观察者的原因吗？？

【问题讨论】：

你确定你的函数接收一个布尔值吗？因为如果由于某种原因您的参数是一个字符串，"true" == true 将返回 false，并且您的数组中不会有任何项目。
是的，我在 console.log 上得到了 true 和 false 没有引号
糟糕的是，我收到了状态字符串。将代码更改为 const newList = this.allTodos.filter(todo => todo.completed == JSON.parse(status)); 现在可以使用了
请为此使用codesandbox.io 创建一个small demo 以显示正在发生的问题。
@palaѕн 我已经通过上面提到的更改解决了它。

标签： javascript vue.js vuejs2 vuex

【解决方案1】：

我认为你不应该在这里使用地图：

        this.allTodos.map(item => {
          if (item.completed == status) {
             filteredResults.push(item);
          }
        });

而是一个 forEach

        this.allTodos.forEach(item => {
          if (item.completed == status) {
             filteredResults.push(item);
          }
        });

【讨论】：