解決vue 按鈕多次點(diǎn)擊重復(fù)提交數(shù)據(jù)問題
這個其實(shí)是一個很細(xì)節(jié)的問題。 如果我們操作一個按鈕,然后在按鈕點(diǎn)擊的時候綁定事件。
事件分為兩種情況:
•第一種: 不操作數(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>
這里我們通過控制isDisable 來設(shè)置 disabled來控制按鈕的點(diǎn)擊和不可點(diǎn)擊。 默認(rèn)isDisable:的值為 false,按鈕可以點(diǎn)擊。 當(dāng)我們點(diǎn)擊這個按鈕的時候,首先將按鈕的綁定isDisable設(shè)置為true,1秒后立馬將其置為false。 所以用戶只能有一秒的時間去操作這個按鈕。
下面給大家補(bǔ)充一個實(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)原理:通過計(jì)時器講button屬性更改,點(diǎn)擊完之后講button屬性設(shè)置為disable
vue綁定button的disable屬性為:disabled:'變量名'
總結(jié)
以上所述是小編給大家介紹的vue 按鈕多次點(diǎn)擊重復(fù)提交數(shù)據(jù)問題,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
vue實(shí)現(xiàn)動態(tài)路由的詳細(xì)代碼示例
動態(tài)路由,動態(tài)即不是寫死的,是可變的,下面這篇文章主要給大家介紹了關(guān)于vue實(shí)現(xiàn)動態(tài)路由的詳細(xì)代碼示例,文中通過圖文以及代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-01-01Vue.js實(shí)現(xiàn)watch屬性的示例詳解
本文討論了watch函數(shù)是如何利用副作用函數(shù)和options進(jìn)行封裝實(shí)現(xiàn)的,也通過調(diào)度函數(shù)去控制回調(diào)函數(shù)的立即執(zhí)行和執(zhí)行時機(jī),還可以解決競態(tài)問題,感興趣的可以了解一下2022-04-04Vue3實(shí)現(xiàn)登錄表單驗(yàn)證功能
這篇文章主要介紹了Vue3實(shí)現(xiàn)登錄表單驗(yàn)證功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-06-06