vue上的v-model改变后如何触发点击事件？

Question

我有一个关于vuejs的checkBox。我在一个函数的状态改变时调用它，但是在v-model改变之前点击事件触发。因此，函数中v-model的值是前一个值。如何使点击事件在v-model更改后触发？

​

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/bootstrap@4.5.3/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.css" />

<script src="https://unpkg.com/vue@2.6.12/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.21.2/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>

​

Answer 1

使用change事件而不是click

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

Answer 2

@atousadarabi如果你等到下一个渲染周期，会有帮助吗？

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

否则，只需删除所有的点击处理程序，并在status上有一个观察者。无论何时更新，都可以执行所需的操作:)