停止多次点击 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>

原文由 Jamie 发布，翻译遵循 CC BY-SA 4.0 许可协议

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>

原文由 Hashem Qolami 发布，翻译遵循 CC BY-SA 3.0 许可协议

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

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

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

原文由 Jenam 发布，翻译遵循 CC BY-SA 4.0 许可协议