Is there a way to individually apply loading to only the button that has been clicked in vuejs?

Question

Is there a way to individually apply loading to only the button that has been clicked in vuejs?

One problem I am facing is that when I click a specific button in a table, all buttons end up in loading mode. The table loops and displays data from an API, with a button embedded in each row. Upon clicking the button, it should send the ID of the clicked button and remain in loading until it receives the necessary function data to be printed. Below is the code snippet:

<table id="customers">
  <tr>
    <th>{{$t('message.numberReport')}}</th>
    <th>{{$t('message.periodFrom')}}</th>
    <th>{{$t('message.periodTo')}}</th>
    <th>{{$t('message.printButton')}}</th>
  </tr>
  <tr v-for="(item,index) in getReportInfo" :key="index">
    <td>{{ item.id }}</td>
    <td>{{ item.periodFrom }}</td>
    <td>{{ item.periodTo }}</td>
    <td>
      <v-btn
        class="primary"
        :loading="loading"
        :disabled="loading"
        @click="fetchGetReportDetailed(item)"
      >{{ $t('message.printButton')}}</v-btn>
    </td>
  </tr>
</table>

If you have any suggestions on how to resolve this issue, I would greatly appreciate your input. You can view a visual example here.

javascript vue.js vuejs2 vue-component

Answer 1

Answer №1

Utilizing the `index` of an item in a list.

To keep track of the index when an item is clicked, you can create a new variable in your data called indexClicked .

data () {
    return {
        // Choose a predefined value, not 0 as the index could be 0.
        indexClicked: undefined // Set a default value
    }
}

When a button is clicked, pass the index value:

<td>
<v-btn class="primary"
       :loading="loading && indexClicked === index" 
       :disabled="loading && indexClicked === index" 
       @click="fetchGetReportDetailed(item, index)">
       {{ $t('message.printButton') }}
</v-btn>
</td>

In your

fetchGetReportDetailed(item, index)

method, assign the index to this.indexClicked:

fetchGetReportDetailed (item, index) {
    // Your logic here
    this.indexClicked = index;
}

This approach should work, but if you require further assistance, kindly provide additional code snippets.

Note: If handling multiple conditions in :disable becomes complex, consider creating a method that returns true or false based on the condition

loading  && this.indexClicked === index

.

Best of luck!

Answer 2

Utilizing the `index` of an item in a list.

To keep track of the index when an item is clicked, you can create a new variable in your data called indexClicked .

data () {
    return {
        // Choose a predefined value, not 0 as the index could be 0.
        indexClicked: undefined // Set a default value
    }
}

When a button is clicked, pass the index value:

<td>
<v-btn class="primary"
       :loading="loading && indexClicked === index" 
       :disabled="loading && indexClicked === index" 
       @click="fetchGetReportDetailed(item, index)">
       {{ $t('message.printButton') }}
</v-btn>
</td>

In your

fetchGetReportDetailed(item, index)

method, assign the index to this.indexClicked:

fetchGetReportDetailed (item, index) {
    // Your logic here
    this.indexClicked = index;
}

This approach should work, but if you require further assistance, kindly provide additional code snippets.

Note: If handling multiple conditions in :disable becomes complex, consider creating a method that returns true or false based on the condition

loading  && this.indexClicked === index

.

Best of luck!

Answer 3

Answer №2

To ensure each row has its own loading property, you can add a new property called loading to each row within the mounted hook:

mounted(){
   this.getReportInfo=this.getReportInfo.map(rep=>{
               rep.loading=false;
             return rep;
         });
}

Then in the template, include:

   <tr v-for="(item,index) in getReportInfo" :key="index">
                            <td>{{ item.id }}</td>
                            <td>{{ item.periodFrom }}</td>
                            <td>{{ item.periodTo }}</td>
                            <td><v-btn  class="primary" :loading="item.loading" :disabled="loading"  @click="fetchGetReportDetailed(item,index)" >{{ $t('message.printButton')}}</v-btn></td>
                        </tr>

In the fetchGetReportDetailed method:

fetchGetReportDetailed(item,index){

....

this.getReportInfo[index].loading=true;
this.$set(this.getReportInfo,index,this.getReportInfo[index])
}

Answer 4

To ensure each row has its own loading property, you can add a new property called loading to each row within the mounted hook:

mounted(){
   this.getReportInfo=this.getReportInfo.map(rep=>{
               rep.loading=false;
             return rep;
         });
}

Then in the template, include:

   <tr v-for="(item,index) in getReportInfo" :key="index">
                            <td>{{ item.id }}</td>
                            <td>{{ item.periodFrom }}</td>
                            <td>{{ item.periodTo }}</td>
                            <td><v-btn  class="primary" :loading="item.loading" :disabled="loading"  @click="fetchGetReportDetailed(item,index)" >{{ $t('message.printButton')}}</v-btn></td>
                        </tr>

In the fetchGetReportDetailed method:

fetchGetReportDetailed(item,index){

....

this.getReportInfo[index].loading=true;
this.$set(this.getReportInfo,index,this.getReportInfo[index])
}

Answer 5

Answer №3

To enhance the organization of your code, consider creating a separate stateful component for the tr element that displays the data. Within this component, you can then call the necessary function.

By implementing this approach, each item in the array will have its loading state managed locally within its respective component.

Answer 6

To enhance the organization of your code, consider creating a separate stateful component for the tr element that displays the data. Within this component, you can then call the necessary function.

By implementing this approach, each item in the array will have its loading state managed locally within its respective component.

Is there a way to individually apply loading to only the button that has been clicked in vuejs?

Answer №1

Utilizing the `index` of an item in a list.

Answer №2

Answer №3

Similar questions

When attempting to fetch JSON data using the Angular 2 `http.get()` method, the data returned is undefined and the component does not reflect any

Error message "invalid function call this.job.execute" when using Node.js node-schedule npm package

Use of ng-if in combination with recursive directives does unexpected behavior

Add an element to an array using the `push` method in JavaScript

How can I fetch the ID from a posted AJAX request in PHP?

Json data integrated dropdown menu

Implement Dynamic Filters in a Vue Component

An automated feature that smoothly transitions a large image onto the screen

Creating a JavaScript function to imitate the pressing of the Enter

What is the proper error type to use in the useRouteError() function in react-router-dom?

What is the reason behind arr.reverse() flipping the original array?

Failure to execute Ajax request when searching for a query

Using `ng-model` within an Angular directive

Easily create an HTML page from a multitude of intricate JavaScript objects with this convenient method

Getting the output from AJAX when the onreadystatechange event occurs

I created a customized version of jQuery tabs, but I am looking for an external link to display the tab content and to style the original navigation

Identifying and handling the removal of a complete div element by the user

Error: Import statement is not allowed outside a module while running on live server

What sets onEnter apart from onStart in ui-router?

Troubleshooting Issue with Internet Explorer failing to update Asp.Net MVC3 Partial View

Is there a way to individually apply loading to only the button that has been clicked in vuejs?

Answer №1

Utilizing the index of an item in a list.

Answer №2

Answer №3

Similar questions

When attempting to fetch JSON data using the Angular 2 `http.get()` method, the data returned is undefined and the component does not reflect any

Error message "invalid function call this.job.execute" when using Node.js node-schedule npm package

Use of ng-if in combination with recursive directives does unexpected behavior

Add an element to an array using the `push` method in JavaScript

How can I fetch the ID from a posted AJAX request in PHP?

Json data integrated dropdown menu

Implement Dynamic Filters in a Vue Component

An automated feature that smoothly transitions a large image onto the screen

Creating a JavaScript function to imitate the pressing of the Enter

What is the proper error type to use in the useRouteError() function in react-router-dom?

What is the reason behind arr.reverse() flipping the original array?

Failure to execute Ajax request when searching for a query

Using `ng-model` within an Angular directive

Easily create an HTML page from a multitude of intricate JavaScript objects with this convenient method

Getting the output from AJAX when the onreadystatechange event occurs

I created a customized version of jQuery tabs, but I am looking for an external link to display the tab content and to style the original navigation

Identifying and handling the removal of a complete div element by the user

Error: Import statement is not allowed outside a module while running on live server

What sets onEnter apart from onStart in ui-router?

Troubleshooting Issue with Internet Explorer failing to update Asp.Net MVC3 Partial View

Utilizing the `index` of an item in a list.