停止多次点击vue.js

Question

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

div元素如下所示：

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

这是处理click：

的方法

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

  

我建议在数据属性中存储异步请求的状态（例如，处理：false，当用户点击元素时，将其设置为true），然后在delete（）方法中检查状态为继续或停止代码。最后，重置成功/失败处理程序中的状态。

例如：

new Vue({
  el: '#app',
  
  data: {
    processing: false
  },
  
  methods: {
    delete(el) {
      // terminate the function
      // if an async request is processing
      if (this.processing === true) {
        return;
      } 
      
      // set the async state
      this.processing = true;
      
      var paragraphs = Array.from(this.$el.querySelectorAll('p'));
      
      // simulating the async request
      setTimeout(() => {
        if (paragraphs.length) {
          paragraphs.shift().remove();
        }
        
        // on success or failure
        // reset the state
        this.processing = false;
      }, 3000);
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.js"></script>
<div id="app">
  Processing: {{ processing }} <br>
  <button @click.prevent="delete()">
    Click here to delete a paragraph 
  </button>

  <p v-for="1 in 3">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis officia adipisci, omnis cum odit modi perspiciatis aliquam voluptatum consectetur. Recusandae nobis quam quisquam magnam blanditiis et quos beatae quasi quia!
  </p>

Answer 2

从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只运行目标方法一次。

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

此处官方Vue文档中的说明：https://vuejs.org/v2/guide/events.html#Event-Modifiers

Answer 3

试试这个

<h:outputText value="#{car.dailyTrakingReportBean.endTime.time == null ? '--' : car.dailyTrakingReportBean.endTime.time}" >
    <f:convertDateTime type="both" dateStyle="default" pattern="h:mm:ss a MM/dd/yyyy" />
</h:outputText>

<div class="ride-delete" v-show="!deleting" @click="delete">
    <p>Delete</p>
</div>

Answer 4

您最好使用vue 2.1.4+本身提供的@click.once修饰符。

Answer 5

试试这个

<div class="ride-delete" v-on:click="delete()">
    <p>Delete</p>
</div>