Vuetify how to avoid a double click of a button

Question

I have a vuetify button that uploads form data to our api then once the response comes back clears the data. However, I am concerned a user could double click the button and it will send the data twice. Is there a built in way to disable a double click or triple click or whatever in vuetify v-btn? Or do I need to create a completely separate reactive model to disable the button while the method completes?

Answer 1

There is no built-in way provided by Vuetify but it is not too hard to bind a loading state to the disabled prop of v-btn that is set false or true based on whether your function is running.

<v-btn :disabled="loading" @click="run"> Button </v-btn>

<script setup>
  import { ref } from 'vue'

  const loading = ref(false)

  async function run() {
    loading.value = true
    // mock API call that takes 3 seconds to complete
    await new Promise(resolve => {
      setTimeout(() => resolve(true), 3000)
    }).finally(() => {
      loading.value = false
    })
  }
</script>

Vuetify Playground example