CODEWITHSUNDEEP
javascriptvue.js
phantom
phantom

Reputation: 1064

Vuejs click event from checkbox?

I have a v-model on checkbox which values are assigned from a loop. I want the click event to invoke a funtion where I need to access the data of the checked ones. When a click is trigerred, If I log the state it doesnot 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/

Upvotes: 88

Views: 193965

Answers (3)

ittus
ittus

Reputation: 22403

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/

Upvotes: 190

Grant
Grant

Reputation: 1994

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

Upvotes: 9

Dgloria
Dgloria

Reputation: 301

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

Upvotes: 2

Related Questions