How to prevent duplicate requests in vuejs

Vuejs method to prevent repeated requests: 1. Add the custom file "preventReClick.js"; 2. Reference preventReClick in main.js; 3. Add "v-preventReClick" to the button.

The operating environment of this article: Windows7 system, Vue2.9.6 version, DELL G3 computer

How does vuejs prevent repeated requests?

VUE prevents multiple clicks and repeated requests

1. Add a custom file preventReClick.js

import Vue from 'vue'
const preventReClick = Vue.directive('preventReClick', {
    inserted: function (el, binding) {
        el.addEventListener('click', () => {
            if (!el.disabled) {
                el.disabled = true
                setTimeout(() => {
                    el.disabled = false
                }, binding.value || 3000)
            }
        })
    }
});
export { preventReClick }

2. Quote

import preventReClick from './store/preventReClick' //防多次点击，重复提交

in main.js

3. Implementation method. Add v-preventReClick on the button

<el-button class="common-button" size="small" type="primary" @click="handleSave(&#39;form&#39;)" v-preventReClick>保 存</el-button>

Recommended: "The latest 5 vue.js video tutorial selections"

The above is the detailed content of How to prevent duplicate requests in vuejs. For more information, please follow other related articles on the PHP Chinese website!