有条件地将 class 应用于列表中的特定项目 Vue.js 3.0

Question

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?

Answer 1

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' }"