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

the selected task objects will be in the array. I am unsure exactly what you are really trying to ask or do. — Jacob Goh
– Jacob Goh, Commented Jul 20, 2018 at 0:02
@JacobGoh In my example, that selectedTasks can hold value that I checked, but I also want to know if one item is checked or unchecked when I click on it( that current design can not tell me that by giving me one variable ) — Kuan
– Kuan, Commented Jul 20, 2018 at 17:58

tony19 · Accepted Answer · 2018-07-20 02:39:18Z

4

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>

answered Jul 20, 2018 at 2:39

tony19

140k23 gold badges281 silver badges354 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Kuan Over a year ago

thanks, in this way, how can I keep that model array "selectedTasks"? What I want is more like I want to keep that selectedTasks array to hold all selected items and when I click any item, I still able to get if it is checked or unchecked

Jacob Goh · Accepted Answer · 2018-07-21 00:28:14Z

4

based on your comment that "I also want to know if one item is checked or unchecked when I click on it", I would use the DOM Event object to detect if it's checked.

demo: https://jsfiddle.net/jacobgoh101/m480bupd/6/

add @click="clickHandler" to the input

<input type="checkbox" :id="task.title" :value="task" v-model="selectedTasks" @change="handleTasks(task)" @click="clickHandler">

use e.target.checked to get the checked

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

answered Jul 21, 2018 at 0:28

Jacob Goh

20.9k5 gold badges58 silver badges75 bronze badges

Comments

chhantyal · Accepted Answer · 2020-04-25 18:12:22Z

3

Use the loop index:

<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>

edited Apr 25, 2020 at 18:12

chhantyal

12.3k9 gold badges55 silver badges79 bronze badges

answered Jul 20, 2018 at 2:35

Brian Lee

18.3k3 gold badges45 silver badges55 bronze badges

1 Comment

Kuan Over a year ago

Thanks, in this way, how can I keep all the value I selected and remove unselected?

Collectives™ on Stack Overflow

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

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related