How to get checked value of checkbox if use array as a model in vue

Question

I wonder if I use array as model for multiple-checkbox list, how can I check which items is checked and which are unchecked efficiently rather than compare one by one with that array?

<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: []
  },
})

Answer 1

You could add a property to each task (e.g., checked) and bind that to each input's v-model, making it trivial in code to check whether a task is checked/selected:

new Vue({
  el: '#app',
  data() {
    return {
      tasks: [
        { title: 'Go to the store', checked: false },
        { title: 'Clean the house', checked: false },
        { title: 'Learn Vue.js', checked: false }
      ]
    };
  },
  methods: {
    clearCheckedTasks() {
      this.tasks = this.tasks.filter(x => !x.checked);
    }
  }
})

<script src="https://unpkg.com/[email protected]"></script>

<div id="app">
  <ul>
    <li v-for="task in tasks">
      <input type="checkbox" :id="task.title" v-model="task.checked">
      <label :for="task.title">{{task.title}}</label>
    </li>
  </ul>
  
  <button @click="clearCheckedTasks">Clear checked tasks</button>
  
  <h3>tasks (live)</h3>
  <pre>{{tasks}}</pre>
</div>