Как применить определенный CSS для элемента в цикле v-for?

Question

У меня есть массив объектов, который содержит имя и идентификатор.Я использую директиву v-for для перебора этих объектов и отображения их имени.Когда я нажимаю на один из <li>, он вызывает метод, который сохраняет в переменной данных идентификатор выбранного объекта.Я пытаюсь применить определенный класс 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;
}