vue 上 v 模型更改后如何触发点击事件？

Question

我在vejs上有一个复选框。我在状态改变时调用函数，但在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上设置一个监视器。当它更新时，做你需要做的:)