Vue.js初学者：修复更改的计算列表

我将任务列表分为已完成和已完成

已完成：

<ul>
    <li v-for="task in tasks" v-if="task.completed">{{task.taskName}}</li>
</ul>

第一个结果：

单击编程按钮后：

---

一旦我点击了带有索引1的编程按钮，它就会被移动到完成列表中，但点击任何其他按钮都不会做任何事情。如何解决这个问题？如何在任务列表中而不是在完成的任务中获取此项的索引？

您的代码实际上正在工作，我无法重现您的问题：页面中还有其他代码没有定义我的坏方法，非常感谢，这就是为什么最好创建并发布一个。你自己会发现这个问题，这会让那些试图帮助你的人更容易解决问题，并增加你迅速找到问题解决方案的机会。：）

 <ul>
    <li v-for="(task, index) in incompleteTasks">{{task.taskName}} - {{index}} 
    <button @click="doalert(index)" type="button">make complete</button>
    </li>
</ul>

new Vue({
    el: "#root",
    data: {
        tasks: [
            {taskName: 'planning', completed: true},
            {taskName: 'designing', completed: false},
            {taskName: 'programming', completed: false},
            {taskName: 'testing', completed: false}
        ]
    },
    computed: {
        incompleteTasks(){
            return this.tasks.filter(task => ! task.completed);
        }
    },
    methods: {
        doalert(index){
            var incompleted_tasks = this.tasks.filter(task => ! task.completed);
            incompleted_tasks[index].completed = true;
        }
    }
});