Vue中async/await绑定按钮点击事件逻辑异常问题求解

代码逻辑存在两处顺序错误，导致执行结果不符合预期：

• 状态翻转时机前置：进入get方法后第一行就对number值取反，初始值true在判断逻辑执行前就被修改为false，判断分支完全错位，永远和点击时的实际状态相反
• 结构冗余：额外嵌套一层getter函数传参，增加了值错乱概率，且success/failed作为普通同步函数被await调用，没有实际异步等待效果，后续加异步逻辑容易出问题。

模板部分可以简化，不需要额外传参，直接绑定方法即可：

<button @click="handleCheck">check</button>

脚本部分调整逻辑顺序，去掉冗余嵌套：

<script>
export default {
  data() {
    return {
      clickStatus: true,
    };
  },
  methods: {
    async handleCheck() {
      // 先根据当前状态执行对应逻辑
      if (this.clickStatus) {
        await this.success()
      } else {
        await this.failed()
      }
      // 逻辑执行完成后再翻转状态，供下次点击使用
      this.clickStatus = !this.clickStatus
    },
    success() {
      // 后续加接口等异步逻辑时，直接返回Promise实例即可，例如 return request('/api/success')
      console.log('成功');
    },
    failed() {
      console.log('失敗');
    }
  },
}
</script>

• 移除了模板传参和内部冗余的getter函数，直接操作组件自身状态，避免传参过程中值被意外修改
• 调整状态翻转顺序：首次进入方法时clickStatus为初始值true，直接走success分支，执行完成后再把状态改为false；第二次点击时就会走failed分支，完全符合交互要求
• 把async关键字直接加在点击事件处理方法上，结构更简洁，后续扩展异步逻辑时不需要调整结构，await会正常等待异步操作执行完成后再翻转状态。

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