javascript - 停止多次点击 vue.js

Question

在我的 vue.js 应用程序中，可以删除项目。

div 元素如下所示:

 <div class="ride-delete" @click="delete">
      <p>Delete</p>
 </div>

这是处理点击的方法:

methods: {
    delete ()
    {
      swal({
        title: "Weet u het zeker?",
        text: "Het is niet mogelijk deze handeling te herstellen!",
        cancelButtonText: 'Stop',
        type: "error",
        showCancelButton: true,
        confirmButtonColor: "#DD6B55",
        confirmButtonText: "Ja, verwijder deze rit.",
        closeOnConfirm: false
      }, () => {
        RideService.destroy(this.ride)
          .then(() => {
            swal({
              title: "Rit succesvol verwijderd",
              type: "success",
              showCancelButton: false,
              timer: 2000,
              showConfirmButton: false
            });
            this.$router.go('/administratie/ritten');
          });
      });
    }
  }

那么我如何才能确保如果用户连续快速点击 3 次，只会发送一个请求。现在有发送 3。所以如果用户点击一次按钮应该被禁用。

--编辑--

import swal from 'sweetalert';
import RideService from '../../services/RideService';

export default {

  data () {
    return {
      ride: { user: {}, location: {}, type: {} },
      deleting: false
    }
  },

  route: {
  data ({ to }) {
      return RideService.show(this.$route.params.rideId)
        .then(function(data) 
        {
          this.ride = data.data.ride;
        }.bind(this));
    }
  }, 

  methods: {
    remove ()
    {
      if (!this.deleting) {
        this.deleting = true
        swal({
          title: "Weet u het zeker?",
          text: "Het is niet mogelijk deze handeling te herstellen!",
          cancelButtonText: 'Stop',
          type: "error",
          showCancelButton: true,
          confirmButtonColor: "#DD6B55",
          confirmButtonText: "Ja, verwijder deze rit.",
          closeOnConfirm: false
        }, () => {
          RideService.destroy(this.ride)
            .then(() => {
              swal({
                title: "Rit succesvol verwijderd",
                type: "success",
                showCancelButton: false,
                timer: 2000,
                showConfirmButton: false
              });
              this.deleting = false
              this.$router.go('/administratie/ritten');
            });
        });

        this.deleting = false
      }  
    }
  }
}       
</script>

--编辑 2--

<template>
  <div class="row center">
    <div class="panel ride">
      <div class="ride-title bar-underline">
        <div class="ride-item-title">
          <strong class="ride-item-title-body">Rit van {{ ride.created_at }}</strong>
        </div>
      </div>

      <div class="ride-item bar-underline">
        <div class="ride-item-title">
          <p>Naam</p>
        </div>

        <div class="ride-item-content">
          <p>{{ ride.user.name }}</p>
        </div>
      </div>

      <div class="ride-item bar-underline">
        <div class="ride-item-title">
          <p>Locatie van</p>
        </div>

        <div class="ride-item-content">
          <p>{{ ride.location.from }}</p>
        </div>
      </div>

      <div class="ride-item bar-underline">
        <div class="ride-item-title">
          <p>Locatie naar</p>
        </div>

        <div class="ride-item-content">
          <p>{{ ride.location.from }}</p>
        </div>
      </div>

      <div class="ride-item bar-underline">
        <div class="ride-item-title">
          <p>Beschrijving</p>
        </div>

        <div class="ride-item-content">
          <p>{{ ride.location.description }}</p>
        </div>
      </div>

      <div class="ride-item bar-underline">
        <div class="ride-item-title">
          <p>Kmz</p>
        </div>

        <div class="ride-item-content">
          <p>{{ ride.location.kmz }}</p>
        </div>
      </div>

      <div class="ride-item bar-underline">
        <div class="ride-item-title">
          <p>kmp</p>
        </div>

        <div class="ride-item-content">
          <p>{{ ride.location.kmp }}</p>
        </div>
      </div>

      <div class="ride-item bar-underline">
        <div class="ride-item-title">
          <p>Uren</p>
        </div>

        <div class="ride-item-content">
          <p>{{ ride.location.hour }} uur</p>
        </div>
      </div>

      <div class="ride-item bar-underline">
        <div class="ride-item-title">
          <p>Google maps</p>
        </div>

        <div class="ride-item-content">
          <p>{{ ride.location.maps }}</p>
        </div>
      </div>

      <div class="ride-item bar-underline">
        <div class="ride-item-title">
          <p>Datum</p>
        </div>

        <div class="ride-item-content">
          <p>{{ ride.created_at }}</p>
        </div>
      </div>

      <div class="ride-item bar-underline">
        <div class="ride-item-title">
          <p>Tijd</p>
        </div>

        <div class="ride-item-content">
          <p>{{ ride.time }}</p>
        </div>
      </div>

      <div class="ride-item bar-underline">
        <div class="ride-item-title">
          <p>Factureerbare tijd</p>
        </div>

        <div class="ride-item-content">
          <p>{{ ride.billabletime }} uur</p>
        </div>
      </div>

      <div class="ride-item bar-underline">
        <div class="ride-item-title">
          <p>Type</p>
        </div>

        <div class="ride-item-content">
          <p>{{ ride.type.name }}</p>
        </div>
      </div>

      <div class="ride-item">
        <div class="ride-edit">
          <p>Edit</p>
        </div>

        <div class="ride-delete" @click="remove">
          <p>Delete</p>
        </div>
      </div>
    </div>
  </div>            
</template>

<script>

import swal from 'sweetalert';
import RideService from '../../services/RideService';

export default {

  data () {
    return {
      ride: { user: {}, location: {}, type: {} },
      processing: false
    }
  },

  route: {
  data ({ to }) {
      return RideService.show(this.$route.params.rideId)
        .then(function(data) 
        {
          this.ride = data.data.ride;
        }.bind(this));
    }
  }, 

  methods: {
    remove ()
    {
       if (this.processing === true) {
        return;
      } 
        this.processing = true
        swal({
          title: "Weet u het zeker?",
          text: "Het is niet mogelijk deze handeling te herstellen!",
          cancelButtonText: 'Stop',
          type: "error",
          showCancelButton: true,
          confirmButtonColor: "#DD6B55",
          confirmButtonText: "Ja, verwijder deze rit.",
          closeOnConfirm: false
        }, () => {
          RideService.destroy(this.ride)
            .then(() => {
              swal({
                title: "Rit succesvol verwijderd",
                type: "success",
                showCancelButton: false,
                timer: 2000,
                showConfirmButton: false
              });
              this.processing = false
              this.$router.go('/administratie/ritten');
            });
        });

        this.processing = false
    }
  }
}       
</script>

Answer 1

从 Vue 2.1.4 开始，有一个非常简单的解决方案:

改变:

<div class="ride-delete" @click="delete">
   <p>Delete</p>
</div>

收件人:

<div class="ride-delete" @click.once="delete">
   <p>Delete</p>
</div>

@click.once 只运行一次目标方法。

就我而言，它解决了登录问题，多次点击会将路径 block 附加到 URL，如下所示:localhost:8000/admin/oms/admin/oms/admin/oms .

这里是Vue官方文档中的描述:https://v2.vuejs.org/v2/guide/events.html#Event-Modifiers