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);
}
Source:stackexchange.com