为什么我的数据过滤器函数返回空？

Question

当我按下按钮messageIncompleted时，它起作用了，但是当我单击messageCompleted按钮时，数据消失了。您能帮我解决这个问题吗？

messageIncompleted() {
    this.messages = this.messages.filter(messages => ! messages.completed );
    this.disabledIncomplete = true;
},
messageCompleted() {
    this.messages = this.messages.filter(messages => messages.completed );
    this.disabledComplete = true;
   }

Answer 1

当您单击messageIncompleted时，this.messages数组将更新为包含messages.completed = false的项目。当您单击messageCompleted时，messages数组将没有任何带有messages.completed = true的项目。

要解决此问题，您可以创建另一个名为filteredMessages的属性，用于根据条件存储和显示消息。默认情况下，您可以将其设置为this.messages。这样，messages数组将不会直接突变。

messageIncompleted() {
    this.filteredMessages = this.messages.filter(messages => !messages.completed);
    this.disabledIncomplete = true;
},
messageCompleted() {
    this.filteredMessages = this.messages.filter(messages => messages.completed);
    this.disabledComplete = true;
}