Vue项目中swal弹窗弹出前checkbox状态已变更，如何实现确认后再修改？

核心思路 #

问题本质是没有拦截checkbox的默认点击切换行为，组件会在点击时自动变更状态，和弹窗逻辑完全独立。需要把状态控制权拿到业务逻辑中，确认后再手动修改状态。

代码修改 #

1. 新增响应式状态变量 #

在你的组件data中新增用于控制开关状态的响应式变量：

data() {
  return {
    // 可根据实际需求设置初始值
    isChecked: true
  }
}

2. 修改模板代码 #

替换原来的静态checked属性为v-model绑定，同时修改事件监听，阻止默认点击行为：

<b-card-text class="mb-0">
    Success
</b-card-text>
<b-form-checkbox
   v-model="isChecked"
   class="custom-control-success"
   name="check-button"
   switch
   @click.prevent="changeStatus"
/>

3. 调整事件逻辑 #

修改changeStatus方法，只有确认后才修改状态：

changeStatus() {
  this.$swal({
    icon: "question",
    text: "Change Status?",
    buttonsStyling: false,
    showCancelButton: true,
    confirmButtonText: "OK",
  }).then((result) => {
    if (result.isConfirmed) {
      // 确认后才翻转开关状态
      this.isChecked = !this.isChecked
      // 其余业务逻辑写在这里
    }
  });
},

原理说明 #

• v-model="isChecked"将开关的状态和响应式变量绑定，开关的展示状态完全由该变量控制
• @click.prevent会阻止点击checkbox时默认的状态切换动作，避免状态提前变更
• 只有用户点击确认按钮后才手动修改isChecked的值，开关才会同步切换；点击取消按钮时不做任何操作，状态保持不变

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