解決vue 按鈕多次點(diǎn)擊重復(fù)提交數(shù)據(jù)問題
這個(gè)其實(shí)是一個(gè)很細(xì)節(jié)的問題。 如果我們操作一個(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>
這里我們通過控制isDisable 來設(shè)置 disabled來控制按鈕的點(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)原理:通過計(jì)時(shí)器講button屬性更改,點(diǎn)擊完之后講button屬性設(shè)置為disable
vue綁定button的disable屬性為:disabled:'變量名'
總結(jié)
以上所述是小編給大家介紹的vue 按鈕多次點(diǎn)擊重復(fù)提交數(shù)據(jù)問題,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
Vue中使用Scss實(shí)現(xiàn)配置、切換主題方式
這篇文章主要介紹了Vue中使用Scss實(shí)現(xiàn)配置、切換主題方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03詳解在WebStorm中添加Vue.js單文件組件的高亮及語法支持
本篇文章主要介紹了詳解在WebStorm中添加Vue.js單文件組件的高亮及語法支持,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2017-10-10vue項(xiàng)目中實(shí)現(xiàn)全局引入jquery
這篇文章主要介紹了vue項(xiàng)目中實(shí)現(xiàn)全局引入jquery方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-06-06Vue組件數(shù)據(jù)傳遞與props校驗(yàn)方式
這篇文章主要介紹了Vue組件數(shù)據(jù)傳遞與props校驗(yàn)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08vue內(nèi)置組件component--通過is屬性動(dòng)態(tài)渲染組件操作
這篇文章主要介紹了vue內(nèi)置組件component--通過is屬性動(dòng)態(tài)渲染組件操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-07-07Vue.js移動(dòng)端左滑刪除組件的實(shí)現(xiàn)代碼
本篇文章主要介紹了Vue.js移動(dòng)端左滑刪除組件的實(shí)現(xiàn)代碼,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09vue-preview動(dòng)態(tài)獲取圖片寬高并增加旋轉(zhuǎn)功能的實(shí)現(xiàn)
這篇文章主要介紹了vue-preview動(dòng)態(tài)獲取圖片寬高并增加旋轉(zhuǎn)功能的實(shí)現(xiàn),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-07-07Vue項(xiàng)目中引入字體文件的幾種方法總結(jié)
在 Vue 項(xiàng)目中引入自定義字體文件,可以通過多種方式實(shí)現(xiàn),這取決于你的項(xiàng)目結(jié)構(gòu)、構(gòu)建工具以及字體文件的來源,本文將詳細(xì)介紹如何通過不同方法引入本地字體文件以及從外部引入字體,需要的朋友可以參考下2024-10-10