[Vuejs]-Vue: How to dynamically update a list with a button click?

2👍

The main bit of changeable program state you describe is whether you’re showing completed or incomplete tasks. You should have a data item for that.

showingCompleted: false

Your message can be computed from that (rather than being a data item), so in your computed section, you would have something like

message() {
  return this.showingCompleted ? 'Completed tasks' : 'Incomplete tasks';
}

The toggleClass method doesn’t do what its name indicates. It should toggle showingCompleted:

this.showingCompleted = !this.showingCompleted;

Finally, your computed list of incomplete tasks should be based on showingCompleted, so that it can be either incomplete or completed tasks:

filteredTasks() {
  return this.tasks.filter(task => task.completed === this.showingCompleted);
}
👤Roy J

Leave a comment