Activate loading state when input changes with VueJS and Vuetify by using @change attribute and setting loading="true"

Question

Activate loading state when input changes with VueJS and Vuetify by using @change attribute and setting loading="true"

I am attempting to develop a function that is activated by the @change event on multiple input fields.

My goal is to set loading="true" for the targeted input until the axios request (PATCH) is completed.

PLEASE NOTE:

There are several v-select components on the page, and I only want to set loading=true for the specific target - the current input/select.

EXAMPLE:

When a user selects an option in the first select in the following example, the inlineUpdate function is triggered, which changes the target to appear like this

<v-select loading="true" @change="$root.inlineUpdate" ...

Subsequently, once the update is completed, the loading attribute is removed.

I believe I need to pass an event argument into the method, but it is not functioning as expected.

Currently, only a value is passed, and it is unclear which input should be marked as loading.

 <v-select @change="$root.inlineUpdate" ...
 <v-select @change="$root.inlineUpdate" ...
 <v-select @change="$root.inlineUpdate" ...
 <v-text-field @change="$root.inlineUpdate"...

 inlineUpdate(event){
              console.log(event)
              console.log(event.target)
             # here I need to set loading="true" for the input
             axios.post(...).finally(() => { // remove the loading })
             # stop loading
            },

console logs show:

>>> house
>>> undefined

Is there a solution to this issue?

javascript vue.js vuetify.js

Answer 1

Answer №1

To ensure smooth loading specifically for the v-select, it is important to create a dedicated variable for handling the loading state. This variable, named isSelectLoading, is initially set to false. During the API call process, it is toggled to true, and upon the resolution of the promise, it is set 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 });
},
}

Enhancing for multiple `v-selects`

Managing loading state for multiple v-select components requires an array named isSelectLoading. This array, initially holding false values, keeps track of loading states for each v-select.

Additionally, to differentiate between the v-select elements being altered, a variable named activeSelect is added. This variable is updated using the @click event listener on the respective v-select.

By linking each v-select to its loading state within the array, only the triggered v-select will display loading status when its selection is modified.

<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]
}

While the example simplifies the concept, in practical scenarios, these elements could be efficiently managed using a

<template v-for="(item, index) in selects">...

structure. Here, selects would provide the necessary fields/properties for generating select components, replacing hardcoded indexes with the index value for event bindings.

Answer 2

To ensure smooth loading specifically for the v-select, it is important to create a dedicated variable for handling the loading state. This variable, named isSelectLoading, is initially set to false. During the API call process, it is toggled to true, and upon the resolution of the promise, it is set 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 });
},
}

Enhancing for multiple `v-selects`

Managing loading state for multiple v-select components requires an array named isSelectLoading. This array, initially holding false values, keeps track of loading states for each v-select.

Additionally, to differentiate between the v-select elements being altered, a variable named activeSelect is added. This variable is updated using the @click event listener on the respective v-select.

By linking each v-select to its loading state within the array, only the triggered v-select will display loading status when its selection is modified.

<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]
}

While the example simplifies the concept, in practical scenarios, these elements could be efficiently managed using a

<template v-for="(item, index) in selects">...

structure. Here, selects would provide the necessary fields/properties for generating select components, replacing hardcoded indexes with the index value for event bindings.

Activate loading state when input changes with VueJS and Vuetify by using @change attribute and setting loading="true"

Answer №1

Enhancing for multiple `v-selects`

Similar questions

The React Fabric TextField feature switches to a read-only mode once the value property is included

In the world of Node.js and Java, the concepts of "if"

The Filereader seems to be having trouble reading a specific file

Error SCRIPT438: Property or method not supported by object in Internet Explorer

Node.js: The object in req is not functioning as expected

Utilizing JavaScript to dynamically resize an element within a slide as soon as the slider transitions to the following slide

Error 404 encountered while trying to access a website with parameters using Vue.js

Incorporating Axios data into a React component

Steps for displaying a particular slide from a thumbnail in a modal with Slick Carousel

What could be the reason for the malfunction of jQuery's show() function?

Divide the table row and store each cell using regular expressions

If the width of the table is set to 100% in the CSS, the legend in the Flot chart will automatically shift to the

Retrieve the latest inserted ID in a Node.js application and use it as a parameter in a subsequent query

Having trouble retrieving the API URL id from a different API data source

Use jQuery to switch back and forth between the login and registration forms on a single

Verify that the computer is connected to the Internet by sending an ajax request to Google

Issues with jQuery Ajax sending Post data to PHP script

What is the best way to resize my hamburger menu and achieve a flawlessly circular border for it?

Utilizing the Command Line/Window feature within Visual Studio Code

Updating a single .jshintrc option for a folder

Activate loading state when input changes with VueJS and Vuetify by using @change attribute and setting loading="true"

Answer №1

Enhancing for multiple v-selects

Similar questions

The React Fabric TextField feature switches to a read-only mode once the value property is included

In the world of Node.js and Java, the concepts of "if"

The Filereader seems to be having trouble reading a specific file

Error SCRIPT438: Property or method not supported by object in Internet Explorer

Node.js: The object in req is not functioning as expected

Utilizing JavaScript to dynamically resize an element within a slide as soon as the slider transitions to the following slide

Error 404 encountered while trying to access a website with parameters using Vue.js

Incorporating Axios data into a React component

Steps for displaying a particular slide from a thumbnail in a modal with Slick Carousel

What could be the reason for the malfunction of jQuery's show() function?

Divide the table row and store each cell using regular expressions

If the width of the table is set to 100% in the CSS, the legend in the Flot chart will automatically shift to the

Retrieve the latest inserted ID in a Node.js application and use it as a parameter in a subsequent query

Having trouble retrieving the API URL id from a different API data source

Use jQuery to switch back and forth between the login and registration forms on a single

Verify that the computer is connected to the Internet by sending an ajax request to Google

Issues with jQuery Ajax sending Post data to PHP script

What is the best way to resize my hamburger menu and achieve a flawlessly circular border for it?

Utilizing the Command Line/Window feature within Visual Studio Code

Updating a single .jshintrc option for a folder

Enhancing for multiple `v-selects`