How trigger click event after v-model's change on vue?-CodePudding

I have a checkBox on vuejs. I call a function when it's status changes, but click event triggers before the v-model changes. So the value of v-model in the function is the previous value. How Can I make the click event trigger after the v-model's change?

var app = new Vue({
  el: '#app',
  data() {
    return {
      status: false
    }
  },
  methods: {
    checkBoxClicked() {
      console.log(this.status)
    }
  }
})

<link type="text/css" rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/[email protected]/dist/bootstrap-vue.css" />

<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/bootstrap-vue.min.js"></script>


<div id="app">
  <b-form-checkbox
      v-model="status"
      name="checkbox"
      @click.native="checkBoxClicked"
    >
      I accept the terms and use
   </b-form-checkbox>
</div>

CodePudding user response：

Use change event instead of click:

<div id="app">
  <b-form-checkbox
      v-model="status"
      name="checkbox"
      @change="checkBoxClicked"
    >
      I accept the terms and use
   </b-form-checkbox>
</div>

CodePudding user response：

@atousadarabi How about if you wait until the next render cycle, does that help?

methods: {
   checkBoxClicked() {
      this.$nextTick(() => {
         console.log(this.status)
      })
   }
}

Otherwise just remove the click handler all together and have a watcher on status. Whenever it updates do what you need to :)