Vuejs click event from checkbox?

Question

I have a v-model on checkbox which values are assigned from a loop. I want the click event to invoke a function where I need to access the data of the checked ones. When a click is triggered, if I log the state it does not print the current clicked data of the checkbox. It prints previous clicked checkbox data. Should a event must be passed and accessed data in the function?

<div id="demo">
  <ul>
    <li v-for="mainCat in mainCategories">
      <input 
        type="checkbox" 
        :value="mainCat.merchantId"     
        id="mainCat.merchantId" 
        v-model="checkedCategories" 
        @click="check(checkedCategories)"
      > 
      {{mainCat.merchantId}}
    </li>
  </ul> 
  {{ checkedCategories }}
</div>

script:

var demo = new Vue({
  el: '#demo',
  data: {
    checkedCategories: [],
    mainCategories: [{
      merchantId: '1'
    }, {
    merchantId: '2'
    }] //testing with data use: [{done:false,content:'testing'}]
  },
  methods: {
    check: function(e) {
    console.log(this.checkedCategories,e)
    }
  }
})

Js fiddle:http://jsfiddle.net/bmpfs2w2/

kissu · Accepted Answer · 2022-10-20 08:30:09Z

192

Use @change instead of @click. Click event is triggered before value is really changed.

<input type="checkbox" 
  :value="mainCat.merchantId" 
  id="mainCat.merchantId" 
  v-model="checkedCategories" 
  @change="check($event)"
>

http://jsfiddle.net/eLzavj5f/

edited Oct 20, 2022 at 8:30

kissu

47.3k16 gold badges94 silver badges196 bronze badges

answered May 24, 2018 at 10:07

ittus

22.5k5 gold badges62 silver badges59 bronze badges

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

5 Comments

aCarella Over a year ago

"Click event is triggered before value is really changed." I just spent half a day trying to figure out why my events were reflecting properly. This saved me.

Arthur Shlain Over a year ago

Thanks! Who can't catch the correct event with boostrap-vue, just replace b-form-checkbox component to plain code.

Shiva Naru Over a year ago

Thank you for the example! The interesting finding was the param value in the event handler reflects the current checked/unchecked status whereas the v-model bound property was showing the previous state.

Brettins Over a year ago

There is a caveat here - @change is called before the value is actually changed. If you aren't passing the $event then whatever function you call will still have the old value.

Dgloria Over a year ago

This fiddle is broken, and (e) has never been used.

OctavianM · Accepted Answer · 2022-07-15 20:57:07Z

9

If you'd like the function to be called after the value has been changed, you can wrap your handler functionality inside of this.$nextTick(). You can read about $nextTick, but the gist is

Defer the callback to be executed after the next DOM update cycle. Use it immediately after you’ve changed some data to wait for the DOM update.

So your handler will get called after the DOM gets updated, aka after your state has changed and the effects have been reflected in the DOM.

<input 
  type="checkbox" 
  :value="mainCat.merchantId"     
  id="mainCat.merchantId" 
  v-model="checkedCategories" 
  @change="check($event)"
> 

// ...

check (e) {
  this.$nextTick(() => {
    console.log(checkedCategories, e)
  })
}

edited Jul 15, 2022 at 20:57

OctavianM

4,6171 gold badge18 silver badges31 bronze badges

answered Oct 24, 2020 at 14:02

Grant

2,0331 gold badge23 silver badges31 bronze badges

2 Comments

aswzen Over a year ago

e is not defined

Dgloria Over a year ago

true, got to define $event: @change="check($event)" otherwise great, got the event object. Thanks. Also console.log(e.target.id) will return the checkbox that was clicked.

Dgloria · Accepted Answer · 2022-02-20 11:35:16Z

3

Altered Grant's solution

<input 
  type="checkbox" 
  :value="mainCat.merchantId"     
  id="mainCat.merchantId" 
  v-model="checkedCategories" 
  @change="check($event)"
/> 

// ...

check (e) {
  this.$nextTick(() => {
    console.log(e.target.id)
  })
}

Thanks Grant

answered Feb 20, 2022 at 11:35

Dgloria

3212 silver badges12 bronze badges

Comments

Denis P · Accepted Answer · 2025-08-01 18:58:47Z

0

If someone is looking just for change event actual value then you can use:

<input 
  type="checkbox" 
  ...
  @change="check($event)"
/> 

// ...

check(e) {
  console.log(e.srcElement.checked);
}

answered Aug 1 at 18:58

Denis P

81211 silver badges12 bronze badges

Collectives™ on Stack Overflow

Vuejs click event from checkbox?

4 Answers 4

5 Comments

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related