How to react and deactivate only that button in Vuetify.js when the follow, unfollow button is clicked

Question

I have a series of buttons with follow, unfollow status and when I click on each button, I want its status to change after a little delay and deactivation, and the button to be reactivated, For example, if the button was in the follow mode, when it was clicked, the button would be deactivated and loaded until the backend operation was performed Then change its status to unfollow. But now with the click of a button, all the buttons change position together.

The result of my work is in the following image:

The code I wrote on the user side is as follows:

 <v-btn
   @click="join()"
   :loading="joinGroup"
   :disabled="joinGroup"
   dark
   v-show="joinBtn"
   color="#7256EA"
   class="mt-2 rounded-full bg-purple-gradient"
   >Join Group
 </v-btn>

The code I wrote on the back side is as follows:

<script>
data() {
    return {
      joinGroup: false,
 }
}

methods: {
      join: async function() {
      this.joinGroup = true;
      if (
        this.group.privacy == 1 ||
        (this.group.privacy == 2 && this.isFollower)
      ) {
        this.addGroupMember(true);
      } else if (this.group.privacy == 0) {
        await this.addGroupMember(false);
        this.sendJoinRequest();
        this.snackBarPrivate();
      } else if (this.group.privacy == 2 && !this.isFollower) {
        this.snackBarFollowers();
      }
      this.joinGroup = false;
    },
}
</script>

Answer 1

I guess your button is in a v-for and each row represents an item of your data. The problem is that each of your buttons bind to your joinGroup for :loading and :disabled , so all of them will show the state when you toggle it true .

When you are within a v-for however, you could identify which button should be disabled/loaded in connection with your item. I have made a codepen for you that shows the concept Codepen .

You could potentially also achieve this using the index in your v-for like in the following snippet.

 <div v-for="(item, index) in items"> <v-btn:disabled="disabled[index]":loading="loading[index]" @click="letItLoad(index)"> Test Button </v-btn> </div>