Vuetify Disable Button for Certain Amount of Time

<!DOCTYPE html>
<html>

<body>
    <div id="app">
        <v-app>
            <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>
        </v-app>
    </div>

<script src="https://unpkg.com/vue@3.2.21/dist/vue.global.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vuetify@3.1.11/dist/vuetify.min.js"></script>

<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>
</body>

</html>

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
​
<head>
    <!-- Load Vuetify Icons and Styles -->
    <link href="https://cdn.jsdelivr.net/npm/@mdi/font@5.9.55/css/materialdesignicons.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vuetify@3.1.11/dist/vuetify.min.css">
</head>
​
<body>
    <div id="app">
        <v-app>
            <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>
        </v-app>
    </div>
​
    <!-- Load Vue.js and Vuetify script -->
    <script src="https://unpkg.com/vue@3.2.21/dist/vue.global.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vuetify@3.1.11/dist/vuetify.min.js"></script>
​
    <!-- Create Vue.js and Vuetify app -->
    <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>
</body>
​
</html>