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

The process of integrating a Loader in Javascript

Steps for integrating external components into Laravel 5.3 with VueJs Routes

Ways to display a US map using d3.js with state names positioned outside each state and pointing towards it

Executing Bower installation within a corporate proxy network

Having trouble loading AngularJS 2 router

Prisma unexpectedly updates the main SQL Server database instead of the specified database in the connection string

A step-by-step guide on making a list item clickable and redirecting to a URL using Vue.js

Tips for personalizing react-show-more text length with Material-UI Icons

Order Up: Vue Draggable Next feature keeps your lists in line

AngularJS: updating a module

Implementing Vuejs sorting feature post rendering

Utilizing Azure SDK to send an email

Is the server delivering an unexpected response?

Unable to store user data in the MongoDB Database

Retrieve binary data of an image from an API and render it on an HTML page

How to effectively filter nested arrays within Mongoose Populate function

enhancing angular directives with data binding while replacing HTML content inside the compile function

Step-by-step guide for activating a text box when a check box is marked

What could be causing the EBUSY: resource busy or locked, open errno: -4082 error to appear while trying to build storybook 7 in next.js 13?

What could be the reason for typescript not issuing a warning regarding the return type in this specific function?

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

The process of integrating a Loader in Javascript

Steps for integrating external components into Laravel 5.3 with VueJs Routes

Ways to display a US map using d3.js with state names positioned outside each state and pointing towards it

Executing Bower installation within a corporate proxy network

Having trouble loading AngularJS 2 router

Prisma unexpectedly updates the main SQL Server database instead of the specified database in the connection string

A step-by-step guide on making a list item clickable and redirecting to a URL using Vue.js

Tips for personalizing react-show-more text length with Material-UI Icons

Order Up: Vue Draggable Next feature keeps your lists in line

AngularJS: updating a module

Implementing Vuejs sorting feature post rendering

Utilizing Azure SDK to send an email

Is the server delivering an unexpected response?

Unable to store user data in the MongoDB Database

Retrieve binary data of an image from an API and render it on an HTML page

How to effectively filter nested arrays within Mongoose Populate function

enhancing angular directives with data binding while replacing HTML content inside the compile function

Step-by-step guide for activating a text box when a check box is marked

What could be causing the EBUSY: resource busy or locked, open errno: -4082 error to appear while trying to build storybook 7 in next.js 13?

What could be the reason for typescript not issuing a warning regarding the return type in this specific function?

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