CODEWITHSUNDEEP
javascriptvue.js
foka135
foka135

Reputation: 187

Vue class binding not working when updating state

I am trying to do Vue class binding based on the index in the v-for. I can see that the state in Vue dev tools changes correctly but the class name is not getting updated.

<div class="group" v-for="(role, index) in roles_be">
  <span class="group-name"> {{ role.name }}</span>
  <i class="fas fa-info-circle"></i>
  <i class="fa fa-fw switch-icon" @click="toggleGroupElements(index)" v-bind:class="[ 
  groupElements.index ? 'fa-toggle-on' : 'fa-toggle-off' ]"></i>
</div>


groupElements: [false, false, false, false],


toggleGroupElements(index) {
              switch (index) {
                case 0:
                  this.groupElements[0] = !this.groupElements[0];
                  break;
                case 1:
                  this.groupElements[1] = !this.groupElements[1];
                  break;
                case 2:
                  this.groupElements[2] = !this.groupElements[2];
                  break;
                case 3:
                  this.groupElements[3] = !this.groupElements[3];
                  break;
              }

            },

Upvotes: 1

Views: 541

Answers (1)

kissu
kissu

Reputation: 46676

Since you're trying to access an index in your array rather than a key in an object, you should rather try groupElements[index] in the class binding.

:class="[groupElements[index] ? 'fa-toggle-on' : 'fa-toggle-off' ]"

Upvotes: 1

Related Questions