v-bind:class not working with array variables

Question

I have the following code in vue-js:

    <table class="table table-sm user-perm-list">
      <tbody v-for="index in totalUsers" v-bind:key="index">
        <tr>
          <td>
            <div class="text-medium">{{userPermissionsName[index-1]}} </div>
            <div class="d-flex py-1">
              <a 
                 style="cursor:pointer; margin-right:0.4rem" 
                 @click=userPermissionsDownloadClicked(index-1) 
                 :title="userPermissionsDownload[index-1] ? 'Download Permitted':'Download not permitted'"
                 v-bind:class="[userPermissionsDownload[index-1] ? 'permission-icon-class-active' : 'permission-icon-class-inactive']">
                <downloadPermissionIcon/>
              </a>
            </div>
          </td>
        </tr>
      </tbody>
    </table>

the v-bind:class inside "a" tag is not working. Inside userPermissionsDownloadClicked, I am toggling the variable: userPermissionsDownload[index-1]. It works with a non array variable but not working with array variable

Can you post the data you have for your totalUsers variable? — Angelo
– Angelo, Commented Nov 15, 2019 at 15:44
Do you mean to have a new <tbody> for every element in totalUsers? I would expect the v-for directive to exist on the <tr> element in this case. — Tanner
– Tanner, Commented Nov 15, 2019 at 15:51
Can you show an example of an object in the userPermissionsName array? That along with the totalUsers variable will help us know where the problem lies — Mike Harrison
– Mike Harrison, Commented Nov 15, 2019 at 15:55

Neil.Work · Accepted Answer · 2019-11-15 17:50:40Z

3

This is one of the "Vue Gotchas"

https://vuejs.org/2016/02/06/common-gotchas/

From "Why isn’t the DOM updating?"

When you modify an Array by directly setting an index (e.g. arr[0] = val) or modifying its length property. Similarly, Vue.js cannot pickup these changes. Always modify arrays by using an Array instance method, or replacing it entirely. Vue provides a convenience method arr.$set(index, value) which is syntax sugar for arr.splice(index, 1, value).

answered Nov 15, 2019 at 17:50

Neil.Work

1,0258 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

v-bind:class not working with array variables

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related