<button :disabled="state" @click="clickbtn"></button>
//在data里面设置state原始的属性值
data(){
return{
state:false
//在methods里面写点击事件
clickbtn(){
if(this.state == false){
let that = this
that.state = true
setTimeout(()=>{
//请求数据。。。
//请求成功后在返回的状态里面加上下面这句话
that.state = false
},3000)
好啦，这样就实现了在3秒之前即使点击多少次，也只发送一次请求
vue实现用户3秒内多次点击。请求只发送一次最近做项目，用户连续点击按钮会一直向后台发送请求，最后按钮的状态会跟后台返回的不统一，于是用这个方法实现了用户不管点多少次，在3秒内只请求一次看如下代码，使用点击事件的disabled属性<button :disabled="state" @click="clickbtn"></button>//在data里面设置state原始的属性值data(){ return{ state:false }}//在methods
问题：在弹窗中有个按钮，点击上线，会在列表中添加一条数据，然后弹窗消失。现在在点击按钮时，由于点击过快，在点击上线按钮到弹窗消失期间，导致请求了多次数据，造成了在列表多出了几次同一时间的信息。希望在上线按钮到弹窗消失期间，只请求一次。
解决方法一：使用this.$nextTick(),nextTick()，是将回调函数延迟在下一次dom更新数据后调用，简单的理解是：当数据更新了，在dom中渲染后，自动执行该函数，
在弹窗组件中的data定义一个flag，表示请求状态
data() {
mounted: function (el, binding) {
el.addEventListener('click', () => {
const events = el.style.pointerEvents
if (events
相对于使用防抖和节流的操作，防抖和节流会受到网络请求的快慢影响，如果网络请求过慢，而且两次点击的时间超过防抖和节流预设的时间，还会触发多次的。本方式使用捕捉promise中resolve和reject的方式，更加精确在什么时候可以触发禁止点击和放开点击
相对于使用变量控制，不需要额外的..
Vue.directive('preventReClick', {
inserted (el, binding) {
// console.log("binding-7", binding)
el.addEventListener('click', () => {
Vue 2秒钟点击多次，只触发一次事件
在开发中，有些提交保存按钮有时候会在短时间内被点击多次，这样就会多次重复请求后端接口，造成数据的混乱，比如新增表单的提交按钮，多次点击就会新增多条重复的数据。
需求：防止按钮在短时间内被多次点击，使用防抖函数限制规定时间内只能点击一次。
定义一个延迟执行的方法，如果在延迟时间内再调用该方法，则重新计算执行时间。
main.js中注册
Vue.directive('debounce', {
inserted(el, binding, vno
$('.sumbit1').click(function () {
$('.sumbit1').unbind();//在点击事件里移除触发事件
var pad = $('input:radio[name=info]:checked').val();
if(typeof(pad)=='undefined'){
alert('请选择服务');
}els...
可以使用
Vue的computed属性来
实现请求只触发一次。在computed属性中定义一个方法，该方法返回一个Promise对象，然后在模板中使用该computed属性即可。由于computed属性只有在其依赖的数据发生变化时才会重新计算，因此
请求只会触发一次。
示例代码如下：
<template>
<div>{{ data }}</div>
</template>
<script>
export default {
data() {
return {
isLoading: false,
responseData: null
computed: {
fetchData() {
if (!this.isLoading && !this.responseData) {
this.isLoading = true
return fetch('https://example.com/api/data')
.then(response => response.json())
.then(data => {
this.isLoading = false
this.responseData = data
} else {
return Promise.resolve(this.responseData)
data() {
return this.fetchData.then(data => data.someProperty)
</script>
