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

Question

我想有条件地禁用 Vue.js 中自动呈现列表中的特定 link，这是我目前拥有的：

<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>

基本上在某些情况下，我想禁用 listOfItems 中的 link 之一，如果这种情况不再适用，则将其重新激活。如果我绑定条件 class 它适用于列表中的每个项目：

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

如果条件为真，如何指定在这种情况下确切应该禁用哪个项目？

Answer 1

您可以在任何您希望以这种方式检查的项目上添加额外的属性：

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

然后，使用对象绑定语法和 ===，因为您正在进行比较：

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

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