解決vue 按鈕多次點擊重復提交數(shù)據(jù)問題

更新時間：2018年05月10日 10:04:02 作者：wandoumm

這篇文章主要介紹了vue 按鈕多次點擊重復提交數(shù)據(jù)的問題,本文通過實例結合的形式給大家介紹的非常詳細，需要的朋友可以參考下

這個其實是一個很細節(jié)的問題。如果我們操作一個按鈕，然后在按鈕點擊的時候綁定事件。

事件分為兩種情況：

•第一種：不操作數(shù)據(jù)型

•第二種：操作數(shù)據(jù)型

<template>
 <button @click="submit()" :disabled="isDisable">點擊</button>
</template>
<script>
 export default {
  name: 'TestButton',
  data: function () {
   return {
    isDisable: false
   }
  },
  methods: {
   submit() {
    this.isDisable = true
    setTimeout(() => {
     this.isDisable = false
    }, 1000)
   }
  },
 }
</script>

這里我們通過控制isDisable 來設置 disabled來控制按鈕的點擊和不可點擊。默認isDisable:的值為 false，按鈕可以點擊。當我們點擊這個按鈕的時候，首先將按鈕的綁定isDisable設置為true，1秒后立馬將其置為false。所以用戶只能有一秒的時間去操作這個按鈕。

下面給大家補充一個實例代碼

vue中button　多次點擊重復提交的實例代碼

sendComment () {
this.disabled = true
if (this.text == ''){
this.$message({
type:'error',
message:'輸入內容不能為空',
})
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
}
})
}
}

實現(xiàn)原理：通過計時器講button屬性更改，點擊完之后講button屬性設置為disable

vue綁定button的disable屬性為:disabled:'變量名'

總結

以上所述是小編給大家介紹的vue 按鈕多次點擊重復提交數(shù)據(jù)問題，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

VUE使用vuex解決模塊間傳值問題的方法
本篇文章主要介紹了VUE使用vuex解決模塊間傳值問題，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-06-06
vue中組件的過渡動畫及實現(xiàn)代碼
這篇文章主要介紹了vue中組件的過渡動畫，并通過實例代碼給大家介紹了過渡動畫的實例代碼，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下
2018-11-11
詳解vue-cli 2.0配置文件(小結)
這篇文章主要介紹了詳解vue-cli 2.0配置文件(小結)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-01-01
vue實現(xiàn)動態(tài)路由的詳細代碼示例
動態(tài)路由,動態(tài)即不是寫死的,是可變的,下面這篇文章主要給大家介紹了關于vue實現(xiàn)動態(tài)路由的詳細代碼示例,文中通過圖文以及代碼介紹的非常詳細,需要的朋友可以參考下
2024-01-01
vue中使用vue-qriously插件生成二維碼
集成vue-cli腳手架里面的二維碼插件貌似很多，一般都會滿足大部分需求，這次就講一下插件vue-qriously生成二維碼效果，感興趣的朋友一起看看吧
2022-04-04
Vue.js實現(xiàn)watch屬性的示例詳解
本文討論了watch函數(shù)是如何利用副作用函數(shù)和options進行封裝實現(xiàn)的，也通過調度函數(shù)去控制回調函數(shù)的立即執(zhí)行和執(zhí)行時機，還可以解決競態(tài)問題，感興趣的可以了解一下
2022-04-04
基于WebRTC實現(xiàn)音視頻通話功能
WebRTC作為一種開放標準的實時通信協(xié)議,能輕松實現(xiàn)瀏覽器之間的實時音視頻通信,本次主要分享基于WebRTC的音視頻通話技術,講解WebRTC原理和音視頻傳輸?shù)汝P鍵概念,通過案例實踐,帶大家掌握如何搭建一個音視頻通話應用,需要的朋友可以參考下
2024-05-05
elementui下image組件的使用
本文主要介紹了elementui下image組件的使用，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2022-06-06
Vue3實現(xiàn)登錄表單驗證功能
這篇文章主要介紹了Vue3實現(xiàn)登錄表單驗證功能,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2022-06-06
vue 中幾種傳值方法(3種)
這篇文章主要介紹了vue 中幾種傳值方法(3種),文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-11-11