Vue中如何让点击事件在v-model值更新完成后触发

问题原因 #

你当前绑定的@click.native是原生点击事件，触发顺序早于Vue对v-model绑定值的同步更新逻辑，所以函数内拿到的永远是上一次的旧值。

解决方案 #

方案1：替换为@change事件（最推荐）

b-form-checkbox的change事件会在选中状态更新、v-model值同步完成后触发，直接替换事件绑定即可：

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

修改后无需调整JS代码，checkBoxClicked内拿到的this.status就是最新值。

方案2：配合$nextTick使用click事件

如果业务场景必须绑定click事件，可以把逻辑放到$nextTick回调中执行，$nextTick会在Vue完成所有数据同步、DOM更新后再执行回调逻辑：

methods: {
  checkBoxClicked() {
    this.$nextTick(() => {
      console.log(this.status)
      // 其余业务逻辑写在这里
    })
  }
}

方案3：用watch监听status变化

不需要给组件绑定任何事件，直接监听v-model绑定的status值，只要值发生变化就自动触发对应逻辑：

var app = new Vue({
  el: '#app',
  data() {
    return {
      status: false
    }
  },
  watch: {
    status(newVal) {
      console.log(newVal)
      // 其余业务逻辑写在这里
    }
  }
})

内容的提问来源于stack exchange，提问作者Atousa Darabi