Stop multiple clicks vue.js
<p>In my vue.js application there items can be removed. </p>

<p>The div element looks like this:</p>

<pre><code> &lt;div class="ride-delete" @click="delete"&gt;
      &lt;p&gt;Delete&lt;/p&gt;
 &lt;/div&gt;
</code></pre>

<p>This is the method that handles the <code>click</code>:</p>

<pre><code>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
      }, () =&gt; {
        RideService.destroy(this.ride)
          .then(() =&gt; {
            swal({
              title: "Rit succesvol verwijderd",
              type: "success",
              showCancelButton: false,
              timer: 2000,
              showConfirmButton: false
            });
            this.$router.go('/administratie/ritten');
          });
      });
    }
  }
</code></pre>

<p>So how can I make sure that if the user clicks 3 times fast after each other there will only be send one request. Right now there are send 3. So the button should be disabled if the user clicks once on it.  </p>

<p>--EDIT--</p>

<pre><code>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
        }, () =&gt; {
          RideService.destroy(this.ride)
            .then(() =&gt; {
              swal({
                title: "Rit succesvol verwijderd",
                type: "success",
                showCancelButton: false,
                timer: 2000,
                showConfirmButton: false
              });
              this.deleting = false
              this.$router.go('/administratie/ritten');
            });
        });

        this.deleting = false
      }  
    }
  }
}       
&lt;/script&gt;
</code></pre>

<p>--EDIT 2--</p>

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

      &lt;div class="ride-item bar-underline"&gt;
        &lt;div class="ride-item-title"&gt;
          &lt;p&gt;Naam&lt;/p&gt;
        &lt;/div&gt;

        &lt;div class="ride-item-content"&gt;
          &lt;p&gt;{{ ride.user.name }}&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;

      &lt;div class="ride-item bar-underline"&gt;
        &lt;div class="ride-item-title"&gt;
          &lt;p&gt;Locatie van&lt;/p&gt;
        &lt;/div&gt;

        &lt;div class="ride-item-content"&gt;
          &lt;p&gt;{{ ride.location.from }}&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;

      &lt;div class="ride-item bar-underline"&gt;
        &lt;div class="ride-item-title"&gt;
          &lt;p&gt;Locatie naar&lt;/p&gt;
        &lt;/div&gt;

        &lt;div class="ride-item-content"&gt;
          &lt;p&gt;{{ ride.location.from }}&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;

      &lt;div class="ride-item bar-underline"&gt;
        &lt;div class="ride-item-title"&gt;
          &lt;p&gt;Beschrijving&lt;/p&gt;
        &lt;/div&gt;

        &lt;div class="ride-item-content"&gt;
          &lt;p&gt;{{ ride.location.description }}&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;

      &lt;div class="ride-item bar-underline"&gt;
        &lt;div class="ride-item-title"&gt;
          &lt;p&gt;Kmz&lt;/p&gt;
        &lt;/div&gt;

        &lt;div class="ride-item-content"&gt;
          &lt;p&gt;{{ ride.location.kmz }}&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;

      &lt;div class="ride-item bar-underline"&gt;
        &lt;div class="ride-item-title"&gt;
          &lt;p&gt;kmp&lt;/p&gt;
        &lt;/div&gt;

        &lt;div class="ride-item-content"&gt;
          &lt;p&gt;{{ ride.location.kmp }}&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;

      &lt;div class="ride-item bar-underline"&gt;
        &lt;div class="ride-item-title"&gt;
          &lt;p&gt;Uren&lt;/p&gt;
        &lt;/div&gt;

        &lt;div class="ride-item-content"&gt;
          &lt;p&gt;{{ ride.location.hour }} uur&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;

      &lt;div class="ride-item bar-underline"&gt;
        &lt;div class="ride-item-title"&gt;
          &lt;p&gt;Google maps&lt;/p&gt;
        &lt;/div&gt;

        &lt;div class="ride-item-content"&gt;
          &lt;p&gt;{{ ride.location.maps }}&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;

      &lt;div class="ride-item bar-underline"&gt;
        &lt;div class="ride-item-title"&gt;
          &lt;p&gt;Datum&lt;/p&gt;
        &lt;/div&gt;

        &lt;div class="ride-item-content"&gt;
          &lt;p&gt;{{ ride.created_at }}&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;

      &lt;div class="ride-item bar-underline"&gt;
        &lt;div class="ride-item-title"&gt;
          &lt;p&gt;Tijd&lt;/p&gt;
        &lt;/div&gt;

        &lt;div class="ride-item-content"&gt;
          &lt;p&gt;{{ ride.time }}&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;

      &lt;div class="ride-item bar-underline"&gt;
        &lt;div class="ride-item-title"&gt;
          &lt;p&gt;Factureerbare tijd&lt;/p&gt;
        &lt;/div&gt;

        &lt;div class="ride-item-content"&gt;
          &lt;p&gt;{{ ride.billabletime }} uur&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;

      &lt;div class="ride-item bar-underline"&gt;
        &lt;div class="ride-item-title"&gt;
          &lt;p&gt;Type&lt;/p&gt;
        &lt;/div&gt;

        &lt;div class="ride-item-content"&gt;
          &lt;p&gt;{{ ride.type.name }}&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;

      &lt;div class="ride-item"&gt;
        &lt;div class="ride-edit"&gt;
          &lt;p&gt;Edit&lt;/p&gt;
        &lt;/div&gt;

        &lt;div class="ride-delete" @click="remove"&gt;
          &lt;p&gt;Delete&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;            
&lt;/template&gt;

&lt;script&gt;

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
        }, () =&gt; {
          RideService.destroy(this.ride)
            .then(() =&gt; {
              swal({
                title: "Rit succesvol verwijderd",
                type: "success",
                showCancelButton: false,
                timer: 2000,
                showConfirmButton: false
              });
              this.processing = false
              this.$router.go('/administratie/ritten');
            });
        });

        this.processing = false
    }
  }
}       
&lt;/script&gt;
</code></pre>