Question

我目前正在研究这个tutorial的Vue框架。目前的剧集是关于Computed Properties。我有两个任务列表，一个包含所有任务，另一个只包含不完整的任务。单击按钮，应更新第二个列表，以便仅显示已完成的任务。我还希望将“不完整的任务”消息更改为“已完成的任务！但是如何在不麻烦的情况下完成所有这些操作？

我在教程中收到的线索就是这个控制台命令：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可以从中计算出来（而不是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);
}

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

1 个答案: