Javascript 如何使用VueJS筛选对象？

我最近一直在练习Vue.js。 现在，我正在制作一个简单的待办事项列表。 某些按钮在筛选任务时不起作用。 列出每项任务的所有按钮。 “正在进行”按钮用于取消选中输入复选框方框。 “完成”按钮用于选中的按钮

有人知道怎么修理吗

新Vue{ el:“应用程序”， 数据：{ 问:， 待办事项：[ {task:'task01'，done:false}， {task:'task02'，done:false}， {task:'task03'，done:true}， {task:'task04'，done:true}， {task:'task05'，done:false}， ] }, 计算：{ }, 方法：{ 所有任务：函数{ 这是托多斯 }, ongoingTask：函数{ this.todos=this.todos.filterfunction el{ el.value=false } }, 顿涅茨克：功能{ this.todos=this.todos.filterfunction el{ 艾尔·查德 } }, addTask：函数{ const todo={task:this.inputTask，done:false，}； this.todos.pushtodo； this.inputAsk=； }, deleteTask：函数索引{ this.todos.index，1； } } } .done{文本装饰：行通过；} 添加 全部的 不间断的 多恩 {{todo.task} 去除

无事可做

---

ongoingTask和doneTask上的所有过滤函数都是错误的，它们应该返回一个值；请看一下筛选器函数的工作原理：

我不确定ongoingTaks的预期行为是什么，但我想下面应该可以解决这个问题。请让我知道，我会相应地更新答案

// ... ongoingTask：函数{ this.todos=this.todos.filterfunction el{ 返回el.value==false } }, 顿涅茨克：功能{ this.todos=this.todos.filterfunction el{ 返回el已检查 } }, // ... 编辑：

问题的另一部分与逻辑有关，只要单击触发筛选的任何按钮，状态中的数据就会被删除。例如，如果我在默认视图中，查看所有待办事项，当我单击“正在进行”按钮时，列表中所有已完成的待办事项都会被删除并永远丢失！；理想情况下，您应该保留该数据并使用计算属性来解决该问题，这里有一个工作示例，我在这里使用Vue组件只是为了将所有数据压缩到一个位置：

添加 全部的 不间断的 多恩 {{todo.task} 去除

无事可做

导出默认值{ 名称:App,， 数据：=>{ 问:， currentFilter：正在进行， 待办事项：[ {task:task01，done:false}， {task:task02，done:false}， {task:task03，done:true}， {task:task04，done:true}， {task:task05，done:false} ] }, 计算：{ ongoingTasks：函数{ 返回this.todos.filterfunctiontodo{ 返回todo.done==false； }; }, doneTasks：函数{ 返回this.todos.filterfunctionel{ 返回el.done； }; } }, 方法：{ 更换过滤器{ this.currentFilter=newFilter； }, addTask：函数{ const todo={task:this.inputTask，done:false}； this.todos.pushtodo； this.inputAsk=； }, deleteTask:functionindex{ this.todos.index，1； }, GetTaskList{ 切换此.currentFilter{ 正在审理的案件： 返回此.ongoingTasks； 案件完成： 返回此.doneTasks； 所有案例： 违约： 返回此.todos； } } } };

---

我希望这有帮助

ongoingTask和doneTask上的所有过滤函数都是错误的，它们应该返回一个值；请看一下筛选器函数的工作原理：

我不确定ongoingTaks的预期行为是什么，但我想下面应该可以解决这个问题。请让我知道，我会相应地更新答案

// ... ongoingTask：函数{ this.todos=this.todos.filterfunction el{ 返回el.value==false } }, 顿涅茨克：功能{ this.todos=this.todos.filterfunction el{ 返回el已检查 } }, // ... 编辑：

问题的另一部分与逻辑有关，只要单击触发筛选的任何按钮，状态中的数据就会被删除。例如，如果我在默认视图中，查看所有待办事项，当我单击“正在进行”按钮时，列表中所有已完成的待办事项都会被删除并永远丢失！；理想情况下，您应该保留该数据并使用计算属性来解决该问题，这里有一个工作示例，我在这里使用Vue组件只是为了将所有数据压缩到一个位置：

添加 全部的 不间断的 多恩 {{todo.task} 去除

无事可做

导出默认值{ 名称 ：App， 数据：=>{ 问:， currentFilter：正在进行， 待办事项：[ {task:task01，done:false}， {task:task02，done:false}， {task:task03，done:true}， {task:task04，done:true}， {task:task05，done:false} ] }, 计算：{ ongoingTasks：函数{ 返回this.todos.filterfunctiontodo{ 返回todo.done==false； }; }, doneTasks：函数{ 返回this.todos.filterfunctionel{ 返回el.done； }; } }, 方法：{ 更换过滤器{ this.currentFilter=newFilter； }, addTask：函数{ const todo={task:this.inputTask，done:false}； this.todos.pushtodo； this.inputAsk=； }, deleteTask:functionindex{ this.todos.index，1； }, GetTaskList{ 切换此.currentFilter{ 正在审理的案件： 返回此.ongoingTasks； 案件完成： 返回此.doneTasks； 所有案例： 违约： 返回此.todos； } } } };

---

我希望这有帮助

您应该使用computed属性筛选任务。我想您可以为用户友好的界面添加一些改进。因此，您的代码将如下所示：

新Vue{ el:“应用程序”， 数据：{ 类型：， 问:， 待办事项：[ {task:'task01'，done:false}， {task:'task02'，done:false}， {task:'task03'，done:true}， {task:'task04'，done:true}， {task:'task05'，done:false}， ] }, 方法：{ setFilterTypetype{ this.type=type； }, 添加任务{ const todo={task:this.inputTask，done:false}； this.todos.pushtodo； this.inputAsk=； }, 删除任务索引{ this.todos.index，1； } }, 计算：{ 过滤气味{ 返回this.todos.filtertodo=>{ 切换此类型{ 案件‘进行中’： 返回！todo.done； 案例“完成”： 返回todo.done； 违约： 返回true； } }; } } } 和模板：

添加 全部的 不间断的 多恩 {{todo.task} 去除

无事可做

我还向按钮添加了活动类。因此，您可以通过css当前排序突出显示。

---

有关computed的详细信息您可以阅读

您应该使用computed属性筛选任务。我想您可以为用户友好的界面添加一些改进。因此，您的代码将如下所示：

新Vue{ el:“应用程序”， 数据：{ 类型：， 问:， 待办事项：[ {task:'task01'，done:false}， {task:'task02'，done:false}， {task:'task03'，done:true}， {task:'task04'，done:true}， {task:'task05'，done:false}， ] }, 方法：{ setFilterTypetype{ this.type=type； }, 添加任务{ const todo={task:this.inputTask，done:false}； this.todos.pushtodo； this.inputAsk=； }, 删除任务索引{ this.todos.index，1； } }, 计算：{ 过滤气味{ 返回this.todos.filtertodo=>{ 切换此类型{ 案件‘进行中’： 返回！todo.done； 案例“完成”： 返回todo.done； 违约： 返回true； } }; } } } 和模板：

添加 全部的 不间断的 多恩 {{todo.task} 去除

无事可做

我还向按钮添加了活动类。因此，您可以通过css当前排序突出显示。

---

有关computed的详细信息，您可以阅读

this.todos=this.todos.filterfunction el{您的所有筛选函数都是错误的。没有任何函数返回值，第一个函数正在尝试在筛选函数中设置值。this.todos=this.todos.filterfunction el{您的所有筛选函数都是错误的。没有返回值，第一个是尝试在筛选函数中设置值。谢谢您的评论。实际上，我以前尝试过您的方法…理想的行为应该是：ongoingTask应该为完成的：false项更新列表，即task01、task02、task05。doneTask应该为完成：正确的项目，即task03、task04所有Task都应该列出所有内容，但也不起作用：'谢谢你的帮助我了解了逻辑。谢谢你。但是关于Vue组件的内容，这超出了我的理解能力：'因为，我还没有学会。但是，我会尽快得到你的观点和答案。我会向其他买家提供解决状态，因为我没有他早些时候回答了。很抱歉。非常感谢你的帮助！！！谢谢你的来信

---

耳鼻喉科。实际上，我以前试过你的方法。。。理想的行为应该是：ongoingTask应更新已完成：错误项目的列表，即task01、task02、task05。doneTask应该更新“完成：真实”项目的列表，即task03、task04所有任务都应该列出所有内容，并且也不起作用：“谢谢你的帮助，我得到了逻辑。非常感谢。但是关于Vue组件的东西，我想不通：“因为，我还没有学会。不过，我会尽快了解你的观点和答案。我将向其他买家提供已解决的状态，因为我在前面给出了答案。对不起。非常感谢你的帮助！！！谢谢你回答我。嗯，Vuejs很复杂。一点一点地理解你的答案。但是看起来：class={active:type==='congressing'}没有根据chrome devtool添加正在进行的类，即使：class={active:type==='done'}没有问题。你知道为什么吗？@user10991526它正在向上一次按下的按钮添加活动类。它添加了要传递给的对象的键：class.Aww，ok。知道了。误解我无论如何都需要练习。非常感谢你的帮助。谢谢你回答我。嗯，Vuejs很复杂。一点一点地理解你的答案。但是看起来：class={active:type==='congressing'}没有根据chrome devtool添加正在进行的类，即使：class={active:type==='done'}没有问题。你知道为什么吗？@user10991526它正在向上一次按下的按钮添加活动类。它添加了要传递给的对象的键：class.Aww，ok。知道了。误解我无论如何都需要练习。非常感谢你的帮助。