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

【问题标题】：Vue: How to dynamically update a list with a button click?Vue：如何通过单击按钮动态更新列表？
【发布时间】：2018-01-14 12:55:33
【问题描述】：

我目前正在用这个tutorial 研究 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>

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);
        }
        },
});

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

【问题讨论】：

标签： javascript vue.js

【解决方案1】：

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

showingCompleted: false

您的 message 可以从中计算出来（而不是 data 项目），因此在您的 computed 部分中，您将有类似的东西

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);
}

【讨论】：