how to add progress bar on button click vuejs vuetify

Question

on search button click i want to show progress bar and after loading data i want to dismiss progress bar in vuetify. how can i do that :

 <template>
    <v-progress-linear v-show="progressBar" slot="progress" color="blue" indeterminate/>

     <v-btn color="primary" rounded center  v-on:click="search" > Search </v-btn>
 </template>

i want button click to show progress bar and after loading data to hide progress bar. How can i do it?

Answer 1

Your v-btn calls the search method. In there you can change the progressbar.

search() {
  this.progressBar = true;
  // Load data here
  this.progressBar = false;
}