Javascript Vue.js方法更改事件不发生'；t触发器

我正试图触发一个更改事件，在这个事件中，每当我选中“复选框”时，一些语句会从true设置为false，反之亦然，但它不起作用

事实上，我就是从这里开始尝试添加这个变更事件的

<div v-for="task in tasks" :key="task.id" v-if="task.completed">
  <ul>
  <li v-text="task.description"></li>
  <input type="checkbox" @change="changeComplete">
  </ul>
</div>




var app = new Vue ({
  el: '#root',
  data:  {
    tasks: [
           {description: 'clean room', completed: true, id: 1},
           {description: 'do homework', completed: true, id: 2},
           {description: 'go to sleep', completed: false, id: 3}
           ]
          },
  methods: {
    changeComplete() {
          this.task.completed = !this.task.completed;
          }
      }
  })

var app=新的Vue({
el:'根'，
数据：{
任务：[
{description:'clean room'，completed:true，id:1}，
{description:'做作业'，完成：true，id:2}，
{description:'进入睡眠状态'，已完成：false，id:3}
]
},
方法：{
变更完成（）{
this.task.completed=！this.task.completed；
}
}
})

---

现在，每当我选中某个任务的复选框时，我都希望“已完成”的值正在更改，但不会触发更改事件，且“已完成”的值保持不变。

您需要在回调中引用要完成的任务：

@change="changeComplete(task)"

然后：

changeComplete(task) {
    task.completed = !task.completed;
}

您的

v-如果
显示已完成的任务，我想您希望显示未完成的任务：

v-if="task.completed == false"

这是一份工作副本：


Vue.config.productionTip=false；
Vue.config.devtools=false；
var app=新的Vue({
el:'根'，
模板：'\
\
\
\
\
\
\
\
',
数据：{
任务：[{
描述：'洁净室'，
已完成：错误，
身份证号码：1
},
{
描述：“做作业”，
已完成：错误，
身份证号码：2
},
{
描述：'去睡觉'，
已完成：错误，
身份证号码：3
}
]
},
方法：{
变更完成（任务）{
task.completed=！task.completed；
}
}
})
此处的
数据
对象中没有
任务
属性，因此您需要在
任务
数组中进行更改，为此，您需要传递索引以确定需要更改的任务


var-app=新的Vue({
el:'根'，
数据：{
任务：[
{description:'clean room'，completed:true，id:1}，
{description:'做作业'，完成：true，id:2}，
{description:'进入睡眠状态'，已完成：false，id:3}
]
},
方法：{
更改完成（索引）{
this.tasks[index]。已完成=！this.tasks[index]。已完成；
}
}
})




为什么要删除，只需更改颜色即可？谢谢，伙计，效果很好。我会接受你的回答。所以我也可以绑定：task=“task”在changeplete（任务）中传递它，然后我的事件也会触发。感谢buddy的帮助。你的解决方案也奏效了。