How to solve the problem of repeatedly submitting by clicking the button

vue developer I used @ click.once to trigger an event to prevent repeated call-up of the payment interface, but if the user chooses to cancel or click * in WeChat Pay, this button cannot be adjusted again. What to do

@ click.once= "toPay ()"

toPay () {

//

}

the expected result is that it is called only once, and if the user clicks to cancel the payment, this button returns to the state that can only be clicked once

Jun.24,2022

self-control. Add a tag default value of true . toPay determines this tag, true executes it, and once executes it, it changes to false .
cancel or time out, you can change to true


you can refer to
data to define a field that can be submitted, such as canPay . True means payment can be made, and vice versa

.
<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 => {
                    //canPaytrue
                    this.canPay = true
                })
        }else {
            console.log('')
        }
    },
    canclePay(){
        //
        //canPaytrue
        this.canPay = true
    }
}
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b3e734-2c42f.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b3e734-2c42f.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?