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>

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

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

1 个答案: