vue.js怎樣解決按鈕多次點(diǎn)擊重復(fù)提交
2 回答
大話西游666
TA貢獻(xiàn)1817條經(jīng)驗(yàn) 獲得超14個(gè)贊
建議使用ref，給button添加注冊(cè)ref引用，然后在表單提交的時(shí)候，獲取button按鈕，使其disable置灰。
ref 被用來給元素或子組件注冊(cè)引用信息。引用信息將會(huì)注冊(cè)在父組件的 $refs對(duì)象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子組件上，引用就指向組件。
1 2 3 | <div id="app"> <button ref="mybutton" type="primary" @click="save">保存</button> </div> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <script> new Vue({ el: "#app", data: { }, methods: { save() { this.$refs.mybutton.disabled = true; } } }) </script> <style> :disabled{ border: 1px solid #DDD; background-color: #F5F5F5; color:#ACA899; } </style> |
阿波羅的戰(zhàn)車
TA貢獻(xiàn)1862條經(jīng)驗(yàn) 獲得超6個(gè)贊
設(shè)置標(biāo)志性變量為ture，如 isAbled，然后在按鈕初次點(diǎn)擊后設(shè)為false，在提交請(qǐng)求返回后設(shè)為true，然后該變量可以在button的disable屬性上使用，也可以自定義按鈕，用于動(dòng)態(tài)控制class，同時(shí)在點(diǎn)擊事件回調(diào)里面進(jìn)行相關(guān)判斷攔截
添加回答
舉報(bào)
0/150
提交
取消