Vue.js 如果在vue中将数组用作模型，如何获取复选框的选中值

我想知道，如果我使用数组作为多个复选框列表的模型，我如何能够有效地检查哪些项目被选中，哪些项目被取消选中，而不是逐个与该数组进行比较

<ul>
<li v-for="task in tasks">
<input type="checkbox" :id="task.title" :value="task" v-model="selectedTasks" @change="handleTasks(task)">
<label :for="task.title">{{task.title}}</label>
</li>
</ul>


new Vue({
  data: {
      tasks: [
        { title: 'Go to the store' },
        { title: 'Clean the house' },
        { title: 'Learn Vue.js' }
      ],
      selectedTasks: []
  },
})

{{task.title}}


新Vue({
数据：{
任务：[
{title:'去商店'}，
{标题：'打扫房子'}，
{title:'Learn Vue.js'}
],
所选任务：[]
},
})

使用循环索引：

<li v-for="(task, index) in tasks">
  <input type="checkbox" :id="task.title" :value="task" v-model="selectedTasks[index]" @change="handleTasks(task)">
  <label :for="task.title">{{task.title}}</label>
</li>

{{task.title}}

您可以为每个

任务添加一个属性（例如，
已选中
），并将其绑定到每个输入的
v型
，使检查任务是否已选中在代码中变得简单：


newvue({
el:“#应用程序”，
数据（）{
返回{
任务：[
{title:'去商店'，选中：false}，
{标题：“打扫房子”，勾选：false}，
{title:'Learn Vue.js'，选中：false}
]
};
},
方法：{
clearCheckedTasks（）{
this.tasks=this.tasks.filter（x=>！x.checked）；
}
}
})



{{task.title}}


清除已检查的任务
任务（实时）
{{tasks}}
根据您的评论“我还想知道当我单击某个项目时，它是否被选中”，我将使用DOM事件对象来检测它是否被选中

演示：

将
@click=“clickHandler”
添加到输入中

methods: {
    clickHandler(e) {
        console.log(e.target.checked);
    },
    // ...
  }

选定的任务对象将在数组中。我不确定您到底想问什么或做什么。@JacobGoh在我的示例中，selectedTasks可以保存我检查过的值，但我还想知道当我单击某个项目时，它是否被选中（当前的设计不能通过给我一个变量来告诉我），谢谢，这样，我如何保留该模型数组“selectedTasks”？我想要的更像是我想要保留selectedTasks数组来保存所有选中的项目，当我单击任何项目时，我仍然能够获取它是否选中。这样，我如何保持我选择的所有值并取消选中它？
methods: {
    clickHandler(e) {
        console.log(e.target.checked);
    },
    // ...
  }