HTML

<div v-for="account in accounts">

  ...

  <button v-if="!isUnlinking" class="btn btn-warning btn-sm" @click="unlinkAccount(provider.providerId)">

      <i class="fa fa-unlink"></i>

      Unlink

  </button>



  <button v-if="!!isUnlinking" class="btn btn-warning btn-sm" :disabled="!!isUnlinking">

      <i class="fa fa-spin fa-refresh"></i>

      Unlinking...

  </button>

  ...

</div>

PROBLEM

When I click on Unlink button, the button within all repeated/iterated div elements is getting the spinner. Whereas I would like only the button that is clicked to have the spinner icon.

In your V-FOR, each row can be assigned a key.

Eg.

<div v-for=" (b,key) in buttons">



  <button>

  {{b}}

  <i class="fa fa-spinner fa-spin" @click="clickButton(key)" v-if="buttonsLoading[key]"> 

  </button>



</div>

And in your VUE data section:

data: {

    buttons:{

        button1:'Click me',

        button2:'NO click me,

        button3:'NOOO Click me',

    },

    buttonsLoading:,

},

methods: {

    clickButton:function(key)

    {

          Vue.set(this.buttonsLoading , key , 1);

    }

}

You're obviously going to know when the button needs to stop, if you're doing an axios or ajax request so when you get a success response, add Vue.set(this.buttonsLoading , 'button' + key , 0) so it stops spinning.

Eg. in my V-FOR setup, I have a button in each row.
When clicked, each individual button must act separately and show it's own spinner, not all of them (which is the error you are having).

To do this, you must create an array and then you can set the key to the array when clicked.

Did a video for you if you want, https://www.youtube.com/watch?v=Zm00rS0gX24, please excuse if it is not explained exactly, I am not the best at explaining these things :) Cheers

In this case every button should have id parameter. When you are 'unlinking' you have to check with v-if if id of button is the same as context element and display spinner only in this case.

The problem seems to me is you are using single variable isUnlinking to make all the buttons visible, so if the variable changes for one of the button, it is applied on all the buttons.

You have to have a array of isUnlinking and change only for that button, like following:

<div v-for="(account, index) in accounts">

  ...

  <button v-if="!isUnlinking[index]" class="btn btn-warning btn-sm" @click="unlinkAccount(provider.providerId)">

      <i class="fa fa-unlink"></i>

      Unlink

  </button>



  <button v-else class="btn btn-warning btn-sm" :disabled="isUnlinking[index]">

      <i class="fa fa-spin fa-refresh"></i>

      Unlinking...

  </button>

Also notice the use of v-else, instead of v-if="!!isUnlinking".

...

The best way is to add this property on the account object:

<div v-for="account in accounts">

  ...

  <button v-if="!account.isUnlinking" class="btn btn-warning btn-sm" @click="unlinkAccount(provider.providerId)">

      <i class="fa fa-unlink"></i>

      Unlink

  </button>



  <button v-if="!!account.isUnlinking" class="btn btn-warning btn-sm" :disabled="!!isUnlinking">

      <i class="fa fa-spin fa-refresh"></i>

      Unlinking...

  </button>

  ...

</div>

Now it's bound to the specific object.

One way I have solved similar problem was that I have passed $event.target.children[0] as a property on a click event function, than removed the class from element and appended a new class for a spinner to an element. I hope this will help.

<div v-for="account in accounts">

  <button class="btn btn-warning btn-sm" 

    @click="unlinkAccount($event.target.children[0])">

      <i class="fa fa-unlink"></i>

      Unlink

  </button>

</div>

<script>

export default {

  methods: {

     unlinkAccount() {

        event.className = event.className.replace(/bfa fa-unlinkb/g, "fa fa-spin fa-refresh");

     }

  }

}

</script>

This is the solution I would like to propose to my question:

UPDATE NOV-2018:

I would suggest creating a new vue-component and iterate over it. The account object would be passed to the child-component via props:

<div>

  <h3> Accounts </h3>

  <AccountButton v-for="account in accounts" :account="account" />

</div>

Good Luck...

PREVIOUS SUGGESTION

<div v-for="account in accounts.map(function(item){ return {item: item, isUnlinking: false}})">

  ...

  <button v-if="!account.isUnlinking" class="btn btn-warning btn-sm" @click="unlinkAccount(account)">

      <i class="fa fa-unlink"></i>

      Unlink

  </button>



  <button v-if="!!account.isUnlinking" class="btn btn-warning btn-sm" :disabled="!!account.isUnlinking">

      <i class="fa fa-spin fa-refresh"></i>

      Unlinking...

  </button>

  ...

</div>





<script>

  // somewhere inside Vue.component

  ...

  function unlinkAccount(account) {

    account.isUnlinking = true;

    // do the unlinking with account.item.provider.providerId

  }

  ...

</script>

Here, I've bootstrapped a new array from the existing accounts array with the map function (this mapping could be moved into the Vue component syntax in JS instead of keeping it in HTML). Now each account item has its own property isUnlinking which can be set as required. I've set the initial value to false as unlinking will start only after clicking the button.

Thank you @Bazinga, @Saurabh, @Bernard Doci and @M U for your participation

Good Luck...