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

Question

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>

move the logic of your click event to a watcher instead of handling the click event. — Mat J
– Mat J, Commented Oct 1, 2021 at 9:20
It is not such that easy in my project, needs so many changes. — Atousa Darabi
– Atousa Darabi, Commented Oct 1, 2021 at 9:27

Nima Ebrazeh · Accepted Answer · 2021-10-01 09:23:20Z

6

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>

answered Oct 1, 2021 at 9:23

Nima Ebrazeh

1,3266 silver badges8 bronze badges

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

Comments

RuNpiXelruN · Accepted Answer · 2021-10-01 09:18:45Z

0

@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 :)

answered Oct 1, 2021 at 9:18

RuNpiXelruN

1,9202 gold badges19 silver badges24 bronze badges

1 Comment

Atousa Darabi Over a year ago

Unfortunately it didn't work for me.

Collectives™ on Stack Overflow

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

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