Vue js event not fired for item filtered out of list

Question

I have a list of items. Each item has a "complete" flag. If this flag is true, the item shows in view A. If it is false, it shows in view B. The items are retrieved via an API request, with a client-side filter applied through a computed method on the base dataset. So for view A it will return items with complete=true, for view B, it will return items with complete=false.

The complete flag is editable (via a checkbox). I have a watcher function on the complete field that results in a PATCH being made to the item to toggle the complete field on the server.

Here's the issue. Since the vue app is filtering items based on the complete flag, any time that field changes, the item is removed from the view, so the watcher never gets triggered and the PATCH is never made.

It makes sense that the item's removal would cause the filter function to be re-run, however it seems odd that the watcher is killed before it can run.

So my question is, how do I achieve this - a list of filtered objects where the filter criteria can be changed, and have that change recognized via a watcher or similar?

Answer 1

You're probably better off using an @input event on the checkbox, and tying that to the api call:

<input type="checkbox" @input="onCheckChange">

...

methods: {
    onCheckChange() {
        // Perform API call here.
    }
}