Vuetify

Vuetify Alert fade after a duration Vuetify Login Form Vuetify Toast Snackbar Demo Vuetify Disable Past Date in DatePicker Vuetify Scrollable Dialog Vuetify Dialog to Confirm Delete Vuetify input File get Selected file name Vuetify validate textarea character limit Vuetify V-Select multiple example Vuetify Checkbox Check All | Uncheck All Example Vuetify Disable Button for Certain Amount of Time Vuetify Validate Email Field Vuetify Change Button Color if Button active or selected Vuetify Change color of v-chip on click Vuetify Image Upload with Preview Vuetify Clear text field using ref Vuetify Disable Future date in Datepicker Vuetify Set Current Date in Datepicker Vuetify rule for Number Between 0 and 999 or no input Vuetify Validation Rule: Allow Empty String or Specific Number of Characters Vuetify Allow only alphanumeric characters in textfield Vuetify Rule Input Text only Accept Number and Dot Vuetify set Confirm Password Validation Rule in text-fields Vuetify Text Field Allow 10 digit Number Vuetify Add Comma to Input Field Automatically Vuetify Check if input contains special characters

Vuetify Disable Button for Certain Amount of Time

In web development, it's common to encounter scenarios where you need to disable a button temporarily, preventing users from taking certain actions for a predefined time period. In this article, we will explore how to achieve this functionality using Vuetify, a popular Vue.js framework. We will provide a step-by-step guide and code examples to implement a disable button feature that keeps the button inactive for a specific amount of time.

written

reviewed

updated

Implementing a Button Disable Feature with Vuetify for a Specific Time Duration

<v-container>
    <h3>Vuetify Disable Button for Certain Amount of Time</h3>
    <v-btn @click="disableButton" color="primary" :disabled="isButtonDisabled">
        {{ isButtonDisabled ? 'Wait for 5 sec' : 'Click Me' }}
    </v-btn>

</v-container>

Run

JavaScript code to disable a button for a certain amount of time:

In this Vue.js script, define the necessary data properties and methods. We introduce a data property called isButtonDisabled to manage the button's state. Initially, it is set to false, indicating that the button is not disabled.

   <script type="module">
        const { createApp } = Vue;
        const { createVuetify } = Vuetify;
        const vuetify = createVuetify();

        createApp({
            data() {
                return {
                    isButtonDisabled: false, // Initially, the button is not disabled
                };
            },
            methods: {
                disableButton() {
                    // Disable the button
                    this.isButtonDisabled = true;

                    // Set a timeout to re-enable the button after a certain amount of time (e.g., 5 seconds)
                    setTimeout(() => {
                        this.isButtonDisabled = false;
                    }, 5000); // 5000 milliseconds = 5 seconds
                },
            },
        })
            .use(vuetify)
            .mount('#app'); // Mount the app to the #app element
    </script>

We also implement a method called disableButton that will be triggered when the button is clicked. Inside this method, we set isButtonDisabled to true to disable the button, and then we use setTimeout to re-enable the button after a specific time interval (e.g., 5 seconds).

Output of Vuetify Disable Button For 5 Seconds

Pasted Image

Conclusion