Vue js 事件未为从列表中过滤的项目触发

Question

我有一个项目列表。每个项目都有一个"完成"标志。如果此标志为 true，则该项将显示在视图 A 中。如果为 false，则显示在视图 B 中。这些项通过 API 请求检索，客户端筛选器通过基本数据集上的计算方法应用。因此，对于视图 A，它将返回 complete=true 的项目，对于视图 B，它将返回 complete=false 的项目。

完整的标志是可编辑的(通过复选框(。我在完整字段上有一个观察器函数，导致对项目进行 PATCH 以切换服务器上的完整字段。

这就是问题所在。由于 vue 应用程序根据完整标志过滤项目，因此每当该字段更改时，该项目都会从视图中删除，因此观察者永远不会被触发，并且永远不会制作 PATCH。

删除项目会导致重新运行筛选器函数是有道理的，但是观察程序在运行之前就被杀死似乎很奇怪。

所以我的问题是，我如何实现这一点 - 可以更改过滤条件的过滤对象列表，并通过观察程序或类似程序识别该更改？

Answer 1

最好在复选框上使用 @input 事件，并将其绑定到 api 调用：

<input type="checkbox" @input="onCheckChange">
...
methods: {
onCheckChange() {
// Perform API call here.
}
}