Блог

Я пытаюсь прикрепить две :class привязки к одному элементу в x-for цикле. Обычно это может быть достигнуто путем передачи одного объекта с несколькими парами ключ: значение. Однако в данном случае одно является условием, а другое — свойством цикла:

Условие:

:class="{'active': colours.includes(arrayItem.class)}"

Свойство:

:class="arrayItem.class"

Оба из которых работают отдельно. Я пытался добавить их как отдельные атрибуты, но применяется только первый. Я тоже пробовал это (безрезультатно):

:class="{'active': colours.includes(arrayItem.class), arrayItem.class}"

Я просмотрел документы, но не нашел решения.

Пример: https://jsfiddle.net/owjbu1ay/10 /

Вы можете использовать массив классов при привязке к атрибуту class. Проблема здесь в синтаксисе объекта {} . Вы можете использовать массив классов и использовать тернарный оператор для условного отображения классов, как показано ниже.

Теперь, если colours массив включает arrayItem.class в себя, он будет применять active класс,

и arrayItem.class это будет 2-й класс, применяемый без каких-либо условий.

 
:class="[colours.includes(arrayItem.class) ? 'active' : '' , arrayItem.class]"