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

Question

我在 vuejs 上有一个复选框。我在状态更改时调用函数，但单击事件在 v-model 更改之前触发。所以函数中v-model的值就是之前的值。如何让v-model改变后触发click事件？

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>