如何解决点击按钮重复提交

Question

vue开发 我用了 @click.once 来触发一个事件 防止重复调起支付接口，但是如果用户在微信支付 选择了取消或者点了×，这个按钮就不能再次调起了，怎么处理

@click.once="toPay()"

toPay(){

//调用支付接口

}

期待结果就是只调用一次，如果用户点击取消支付，这个按钮还恢复只能点击一次的状态

Answer 1

可以参考下
data中可以定义一个可以提交的字段如canPay，true的时候表示可以进行支付，反之不能

<button @click="toPay" :disabled="!canPay">立即支付</button>
<button @click="canclePay">支付</button>

data(){
    return {
        canPay: true
    }
},
methods: {
    toPay(){
        if(this.canPay){
            this.canPay = false
            //调用支付接口
            axios.post('/api/xxx',{})
                .then(res => {
                    //成功后执行其他操作
                })
                .catch(err => {
                    //支付失败后让canPay变成true，可以重新点击
                    this.canPay = true
                })
        }else {
            console.log('请勿重复点击支付')
        }
    },
    canclePay(){
        //取消支付做点其他事情
        //最后让canPay变成true，可以再次重新点击
        this.canPay = true
    }
}

Answer 2

自己人为控制。增加一个 tag 默认值为 true。toPay里面判断这个标记，true就执行，执行过一次就改成 false 。
取消或者超时，都可以改为 true