[Vuejs]-VueJS/Vuetify – @change set loading="true" on input

by

0👍

✅

You need to create a separate variable that handles loading for only the v-select. So we create one called isSelectLoading, which defaults to false. Then, when we begin our API call process, we set it to true and once the promise resolves we set it back to false.

<v-select label="Typ nehnuteľnosti" :loading="isSelectLoading"  @change="$root.inlineUpdate" ...

...
 data: () => ({
   isSelectLoading: false
 }),
 methods: {
   inlineUpdate(){
     this.isSelectLoading = true;
     axios.put("/some/url", ...)
        .then(apiResponse => { //do some stuff })
        .catch(apiError => { //oh no! })
        .finally(() => { this.isSelectLoading = false });
   },
 }

Update for multiple v-selects

You need a way to keep track of which components are loading. We will handle that with an array called isSelectLoading. It will be in our data property, and we are defaulting the loading state to false.

You also need a way to know which v-select is being changed. To take care of that, we will create another variable called activeSelect. We will bind this to our v-select via the @click event listener.

Then, when we change a selection from any of our selects, we can update our loading state only for that v-select!

 <v-select 
    @change="inlineUpdate" 
    @click="activeSelect = 0"
    :loading="isSelectLoading[0]"...
 <v-select 
    @change="inlineUpdate" 
    @click="activeSelect = 1"
   :loading="isSelectLoading[1]"...
 <v-select 
    @change="inlineUpdate" 
    @click="activeSelect = 2"
    :loading="isSelectLoading[2]"...
 <v-text-field
    @change="inlineUpdate" 
    @click="activeSelect = 3"
    :loading="isSelectLoading[3]"...

 ...
  data: () => ({
    activeSelect: null,
    items: ["a", "b", "c"],
    isSelectLoading: [false, false, false]
  }),
 methods: {
   inlineUpdate(){
     this.toggleLoading(this.activeSelect);
     axios.put("/some/url", ...)
        .then(apiResponse => { //do some stuff })
        .catch(apiError => { //oh no! })
        .finally(() => { this.toggleLoading(this.activeSelect); });
   },
   toggleLoading(index) {
     this.isSelectLoading[index] = !this.isSelectLoading[index]
   }

In this example it’s a bit trivialized; in real code, we could put these inside of a <template v-for="(item, index) in selects">..., where selects would have the required fields/properties in order to generate your select components. You would replace the hard-coded indexes with the value of index for the event bindings.

Leave a comment