How to implement the removal of completed tasks?

Question

Vue.js

How to implement the removal of completed tasks?

jsfiddle code

Answer 1

Before implementing the deletion, we will give the user the opportunity to mark the task as completed. Let's add support for the v-model directive to the task component. We change the name of the parameter from task to value (or set the model if we need to set some other name), and wrap the task object itself in a Proxy that will intercept the setting of property values, collect a new object and send it to the parent component:

computed: {
  task() {
    return new Proxy(this.value, {
      set: (target, prop, value) => {
        this.$emit('input', { ...target, [prop]: value });
        return true;
      },
    });
  },
},

And we bind the done property to the checkbox (if, in addition to done, some other properties need to be edited - no problem, we indicate them in the v-modelcorresponding input fields in the same way): Now the deletion itself. In the task component, add a button, by clicking on which we emit an event:
<input type="checkbox" v-model="task.done">

<button v-if="task.done" @click="$emit('delete')">delete</button>

In the parent component, we subscribe to this event and remove the task from the array:

<task-element
  v-for="(n, i) in todos"
  v-model="todos[i]"
  @delete="todos.splice(i, 1)"
></task-element>

https://jsfiddle.net/8g45pcx1/