Javascript Vue：如何通过单击按钮动态更新列表？

我目前正在研究这个Vue框架。 当前一集是关于计算属性的。我有两个任务列表，一个包含所有任务，另一个仅包含未完成的任务。单击一个按钮，第二个列表将被更新，因此它只显示已完成的任务。我还希望消息“未完成的任务”更改为“已完成的任务”。但是我如何做到这一点而不费吹灰之力呢

我在教程中得到的线索是控制台命令：

app.tasks[0]。completed=false；

HTML

<div id="computedList">

    <h2>All Tasks</h2>

    <ul>    
        <li v-for="task in tasks" v-text="task.description"></li>

    </ul>

    <h2>{{ message }}</h2>

    <ul>
        <li v-for="task in incompleteTasks" v-text="task.description"></li>
    </ul>

    <button @click="toggleClass">Complete Class</button>

    <br>

</div>

---

我希望解决方案包含尽可能少的代码。谢谢！

您描述的可更改程序状态的主要部分是您显示的是已完成的任务还是未完成的任务。您应该有一个

数据

项

showingCompleted: false

您的

消息

可以从中计算出来（而不是

数据

项），因此在

计算

部分中

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

toggleClass

方法不执行其名称所指示的操作。它应该切换

showingCompleted

：

this.showingCompleted = !this.showingCompleted;

最后，未完成任务的计算列表应基于

显示已完成的

，以便它可以是未完成或已完成的任务：

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

---

您描述的可更改程序状态的主要部分是您显示的是已完成的任务还是未完成的任务。您应该有一个

数据
项

showingCompleted: false

您的
消息
可以从中计算出来（而不是
数据
项），因此在
计算
部分中

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

toggleClass
方法不执行其名称所指示的操作。它应该切换
showingCompleted
：

this.showingCompleted = !this.showingCompleted;

最后，未完成任务的计算列表应基于
显示已完成的
，以便它可以是未完成或已完成的任务：

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