javascript - Vue : How to dynamically update a list with a button click?

Question

我目前正在用这个学习Vue框架tutorial 。当前剧集是关于计算属性的。我有两份任务 list ，一份包含所有任务，一份仅包含未完成的任务。单击按钮，第二个列表应该更新，因此它只显示已完成的任务。我还希望消息“未完成的任务”更改为“已完成的任务!”。但是我如何轻松地完成这一切？

我在教程中收到的线索是这个控制台命令: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>

JavaScript

var appb = new Vue({

    el: '#computedList',

    data: {
        message: 'Incomplete tasks',
        tasks: [
            {description: 'Begin to study Vue', completed: true},
            {description: 'Begin with the testapp', completed: true},
            {description: 'Begin to study the ABB webbapp', completed: false},
            {description: 'Begin to study Angular2', completed: false},
        ]
    },

    computed: {

        incompleteTasks() {

            return this.tasks.filter(task => !task.completed); //Filtrerar ovanstående lista!

        }
        },

    methods: {
        toggleClass() {
            return this.tasks.filter(task => task.completed);
        }
        },
});

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

Answer 1

您描述的可更改程序状态的主要部分是您是否显示已完成或未完成的任务。您应该为此拥有一个data 项。

showingCompleted: false

您的消息可以从中计算出来(而不是作为数据项)，因此在您的计算部分中，您会得到一些东西喜欢

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

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

this.showingCompleted = !this.showingCompleted;

最后，您计算的未完成任务列表应基于 showingCompleted，以便它可以是未完成或已完成的任务:

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