I'm attempting to utilize Vue class binding depending on the index within the v-for loop. While I can see that the state in Vue dev tools is changing correctly, the class name itself isn't being 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;
}
},