Apply class conditionally to specific item in a list Vue.js 3.0

user_14022011 0
Viewed 139

I'd like to disable specific link in automatically rendered list in Vue.js conditionally, here is what I have at the moment:

<ul>
  <li class="nav-item" :key="id" v-for="(item, id) in listOfItems">
    <a class="nav-link" :id="item.id">{{ item.name }}</a>
  </li>
</ul>

Basically in some conditions I'd like to disable one of the links from the listOfItems and get it back active if this condition is not applicable anymore. If I bind conditional class it applies to each item in the list:

:class="[someCondition = 'something' ? 'disabled' : '']"

How to specify in this condition which item exactly should be disabled if the condition is true?

vuejs3 vue.js conditional-statements css javascript
1 Answers

You could put an additional property on any items you want checked that way:

listOfItems: [
  { id: 1, name: 'name1', checkme: true },
  { id: 2, name: 'name2', checkme: false },
]

Then, using object binding syntax and === since you're doing a comparison:

:class="{ disabled: item.checkme && someCondition === 'something' }"
user_21850930
Related