解決vue 按鈕多次點(diǎn)擊重復(fù)提交數(shù)據(jù)問(wèn)題
這個(gè)其實(shí)是一個(gè)很細(xì)節(jié)的問(wèn)題。 如果我們操作一個(gè)按鈕，然后在按鈕點(diǎn)擊的時(shí)候綁定事件。
事件分為兩種情況：
•第一種： 不操作數(shù)據(jù)型
•第二種： 操作數(shù)據(jù)型
<template>
<button @click="submit()" :disabled="isDisable">點(diǎn)擊</button>
</template>
<script>
export default {
name: 'TestButton',
data: function () {
return {
isDisable: false
}
},
methods: {
submit() {
this.isDisable = true
setTimeout(() => {
this.isDisable = false
}, 1000)
}
},
}
</script>
這里我們通過(guò)控制isDisable 來(lái)設(shè)置 disabled來(lái)控制按鈕的點(diǎn)擊和不可點(diǎn)擊。 默認(rèn)isDisable:的值為 false，按鈕可以點(diǎn)擊。 當(dāng)我們點(diǎn)擊這個(gè)按鈕的時(shí)候，首先將按鈕的綁定isDisable設(shè)置為true，1秒后立馬將其置為false。 所以用戶只能有一秒的時(shí)間去操作這個(gè)按鈕。
下面給大家補(bǔ)充一個(gè)實(shí)例代碼
vue中button 多次點(diǎn)擊重復(fù)提交的實(shí)例代碼
sendComment () {
this.disabled = true
if (this.text == ''){
this.$message({
type:'error',
message:'輸入內(nèi)容不能為空',
})
this.disabled = false
}else{
this.$post('/xx/xx/IdleGoodsComment',{
goods_id:this.$route.params.id,
content:this.text,
user_id:window.uId,
type:1
}).then((res) => {
if(res){
this.getDetail()
setTimeout(()=>{
this.disabled=false
this.getCommentList()
this.text = ''}
,2000)
this.disabled = true
}
})
}
}
實(shí)現(xiàn)原理：通過(guò)計(jì)時(shí)器講button屬性更改，點(diǎn)擊完之后講button屬性設(shè)置為disable
vue綁定button的disable屬性為:disabled:'變量名'
總結(jié)
以上所述是小編給大家介紹的vue 按鈕多次點(diǎn)擊重復(fù)提交數(shù)據(jù)問(wèn)題，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
本篇文章主要介紹了VUE使用vuex解決模塊間傳值問(wèn)題 ，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-06-06
vue中組件的過(guò)渡動(dòng)畫及實(shí)現(xiàn)代碼
這篇文章主要介紹了vue中組件的過(guò)渡動(dòng)畫，并通過(guò)實(shí)例代碼給大家介紹了過(guò)渡動(dòng)畫的實(shí)例代碼，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-11-11
這篇文章主要介紹了詳解vue-cli 2.0配置文件(小結(jié))，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-01-01
vue實(shí)現(xiàn)動(dòng)態(tài)路由的詳細(xì)代碼示例
動(dòng)態(tài)路由,動(dòng)態(tài)即不是寫死的,是可變的,下面這篇文章主要給大家介紹了關(guān)于vue實(shí)現(xiàn)動(dòng)態(tài)路由的詳細(xì)代碼示例,文中通過(guò)圖文以及代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-01-01
集成vue-cli腳手架里面的二維碼插件貌似很多，一般都會(huì)滿足大部分需求，這次就講一下插件vue-qriously生成二維碼效果，感興趣的朋友一起看看吧2022-04-04
Vue.js實(shí)現(xiàn)watch屬性的示例詳解
本文討論了watch函數(shù)是如何利用副作用函數(shù)和options進(jìn)行封裝實(shí)現(xiàn)的，也通過(guò)調(diào)度函數(shù)去控制回調(diào)函數(shù)的立即執(zhí)行和執(zhí)行時(shí)機(jī)，還可以解決競(jìng)態(tài)問(wèn)題，感興趣的可以了解一下2022-04-04
WebRTC作為一種開放標(biāo)準(zhǔn)的實(shí)時(shí)通信協(xié)議,能輕松實(shí)現(xiàn)瀏覽器之間的實(shí)時(shí)音視頻通信,本次主要分享基于WebRTC的音視頻通話技術(shù),講解WebRTC原理和音視頻傳輸?shù)汝P(guān)鍵概念,通過(guò)案例實(shí)踐,帶大家掌握如何搭建一個(gè)音視頻通話應(yīng)用,需要的朋友可以參考下2024-05-05
本文主要介紹了elementui下image組件的使用，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
Vue3實(shí)現(xiàn)登錄表單驗(yàn)證功能
這篇文章主要介紹了Vue3實(shí)現(xiàn)登錄表單驗(yàn)證功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-06-06
這篇文章主要介紹了vue 中幾種傳值方法(3種),文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11