Pre checking checkbox using Vuejs and v-model

Question

I have a series of checkboxes that are bound to the v-model with a value.

However when you come to the page I need some of the checkboxes pre-checked. I can't use the :checked binding as i'm using the v-model and I need the v-model to pass a value to my checkedNames array.

<div id='example-3'>
  <input type="checkbox" id="jack" value="Jack" v-model="checkedNames" PRE-CHECK-THIS-CHECKBOX>
  <label for="jack">Jack</label>
  <input type="checkbox" id="john" value="John" v-model="checkedNames">
  <label for="john">John</label>
  <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
  <label for="mike">Mike</label>
  <br>
  <span>Checked names: {{ checkedNames }}</span>
</div>

new Vue({
  el: '#example-3',
  data: {
    checkedNames: []
  }
})

SoyChai · Accepted Answer · 2021-03-12 18:57:36Z

5

I took some liberties to modify a few things, but this gets what you're after:

<div id='example-3'>
  <div v-for="(item, index) in names" :key="index">
    <input type="checkbox" :id="item.name" v-model="item.checked">
    <label :for="item.name">{{ item.name }}</label>
  </div>
  <span>Checked names: {{ checkedNames }}</span>
</div>

new Vue({
  el: '#example-3',
  data() {
    return {
      names: [{
        name: 'jack',
        checked: true
      }, {
        name: 'john',
        checked: false
      }, {
        name: 'mike',
        checked: false
      }]
    }
  },
  computed: {
    checkedNames () {
       return this.names.filter(item => item.checked).map(name => name.name)
    }
  }
})

And a working fiddle: https://jsfiddle.net/aj6apozq/8/

edited Mar 12, 2021 at 18:57

SoyChai

3202 silver badges11 bronze badges

answered Jan 23, 2018 at 5:40

user320487

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

Comments

Richard Matsen · Accepted Answer · 2018-01-23 09:37:33Z

3

You can use the mounted() hook and a ref attribute on the input.

<div id='example-3'>
  <input type="checkbox" id="jack" value="Jack" v-model="checkedNames" 
    ref="precheck" PRE-CHECK-THIS-CHECKBOX>
   ...
</div>

new Vue({
  el: '#example-3',
  data: {
    checkedNames: []
  },
  mounted() { 
    this.checkedNames.push(this.$refs.precheck.value)
  }
})

answered Jan 23, 2018 at 9:37

Richard Matsen

20.9k3 gold badges59 silver badges85 bronze badges

1 Comment

Jose Mhlanga Over a year ago

Thanks dude, found this after a struggle with a messy code!

Collectives™ on Stack Overflow

Pre checking checkbox using Vuejs and v-model

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related