Vue Условное связывание классов

Question

Я пытаюсь динамически визуализировать класс на основе actionTypeCreate. Это метод, который просто возвращает логическое значение, основанное на переданном пропе actionType. Я запускаю этот метод на смонтированном хуке и подтвердил, что он возвращается правильно.

Теперь я пытаюсь вернуть значение класса 'col-md-4', если actionTypeCreate. Если не actionTypeCreate, я хочу вернуть класс 'col-md-6'.

Это то, что у меня есть, но оно не работает:

:class="{toggleActionType : 'col-md-4' ? 'col-md-6'}"

Я пытался сослаться на это существующий вопрос, но я не получил его.

Answer 1

Вы можете сделать это следующим образом:

:class="{'col-md-4' : toggleActionType , 'col-md-6' : !toggleActionType }"

Answer 2

Согласно самой документации Vue вы можете сделать это двумя способами. Во-первых, вы можете использовать Синтаксис массива , и это широко используется для применения списка классов .

Синтаксис массива

:class="[toggleActionType : 'col-md-4' ? 'col-md-6']"

Или вы можете сделать это как обычно с помощью синтаксиса объекта, но он не принимает троичные операции, поэтому вы должны сделать это следующим образом:

Синтаксис объекта

:class="{'col-md-4' : toggleActionType , 'col-md-6' : !toggleActionType}"

Answer 3

Попробуйте это:

:class="[toggleActionType : 'col-md-4' ? 'col-md-6']"