How to prevent checking same value checkboxes using Vue.js?

Question

I just started learning vue.js, I have such a problem, I have multiple checkboxes some of them have the same value, As a result, checkboxes of the same value are checked at the same time, How can this problem be solved?

var app = new Vue({
  el: '#app',
  data: {
    checkedNames:[]
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="Jack" v-model="checkedNames">
<label for="jack">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>Checked names: {{ checkedNames }}</span>

</div>

Do you want the second input to have the value John or Jack? — Andres Paul
– Andres Paul, Commented May 2, 2021 at 9:41

Majed Badawi · Accepted Answer · 2021-05-02 09:41:37Z

1

Try this:

const app = new Vue({ 
  el: '#app', 
  data: () => ({ checkedNames:[] }),
  computed: { 
    names: function() { return this.checkedNames.filter(e => e !== false); } 
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <input type="checkbox" id="jack" true-value="Jack" v-model="checkedNames[0]">
  <label for="jack">Jack</label>
  <input type="checkbox" id="jack1" true-value="Jack" v-model="checkedNames[1]">
  <label for="jack1">Jack</label>
  <input type="checkbox" id="mike" true-value="Mike" v-model="checkedNames[2]">
  <label for="mike">Mike</label><br>
  <span>Checked names: {{ names }}</span>
</div>

edited May 2, 2021 at 9:41

answered May 2, 2021 at 9:05

Majed Badawi

28.5k4 gold badges30 silver badges56 bronze badges

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

1 Comment

Andres Paul Over a year ago

The second label has the incorrect for so if you click on it, the first checkbox is still checked

Collectives™ on Stack Overflow

How to prevent checking same value checkboxes using Vue.js?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related