javascript - 如何为 v-for 循环中的项目应用特定的 CSS？

Question

我有一个包含名称和 ID 的对象数组。我正在使用v-for指令来遍历这些对象并显示它们的名称。当我单击其中一个时<li>，它会调用一个方法，该方法将所选对象的 id 存储在数据变量中。我正在尝试为此选定项目应用特定的 CSS 类（应用灰色背景以告诉用户它当前已被选中）由于它被认为是混合的反模式v-for，v-if我目前正在寻找另一种选择。

我试图以当前项目作为参数调用一个方法，并返回一个类，例如"CommonItemClass SelectedClass"当前项目 == 所选项目（与 一起存储@click）。不幸的是，它不起作用。

<ol>         
 <li @click="selectedCategorie(categorie)" v-for="categorie in categories" :key="categorie.id" :class="methodClass(categorie)">
  {{ categorie.nom }}             
 </li>
</ol>

标签： javascriptvue.jsv-for

Answer 1

尝试这个：

在您的模板中：

<ol>
    <li
        :key="categorie.id"
        v-for="categorie in categories"
        :class="{ 'selected': selectedId === categorie.id }"
        @click="selectedId = categorie.id"
    >{{ categorie.nom }}</li>
</ol>

在你的 javascript

data() {
    return {
        categories: [...],
        selectedId: null
    };
}

在你的风格

li.selected {
    background-color: grey;
}