1. 程式人生 > >vue 按鈕多次點選重複提交資料

vue 按鈕多次點選重複提交資料

這個其實是一個很細節的問題。 如果我們操作一個按鈕,然後在按鈕點選的時候繫結事件。 
事件分為兩種情況:

  • 第一種: 不操作資料型
  • 第二種: 操作資料型
<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。 所以使用者只能有一秒的時間去操作這個按鈕。