Привязка условного класса Vue

Question

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

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

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

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

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

Answer 1

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

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

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

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

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

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

Answer 2

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

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

Answer 3

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

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