Vue Conditional Class Binding

Question

I am trying to dynamically render class based off actionTypeCreate. This is a method that simply returns a boolean value based off the prop actionType that is passed. I am triggering this method on the mounted hook and confirmed it is returning properly.

Now I am trying to return the class value of 'col-md-4' if actionTypeCreate. If not actionTypeCreate I want to return the class 'col-md-6'.

This is what I have but it is not working:

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

I tried to reference this existing question, but I did not get it.

Hans Felix Ramos · Accepted Answer · 2020-04-30 21:27:23Z

1

You can do it as follows:

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

answered Apr 30, 2020 at 21:27

Hans Felix Ramos

4,4543 gold badges19 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

SMAKSS · Accepted Answer · 2022-07-28 09:40:02Z

0

According to the Vue documentation itself you can do it in two ways. First, you can use Array Syntax and this is broadly used to apply a list of classes.

Array Syntax

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

Or you can do it as normal by Object Syntax but it does not accept ternary operations, so you have to do it this way:

Object Syntax

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

edited Jul 28, 2022 at 9:40

answered Apr 30, 2020 at 21:33

SMAKSS

10.6k3 gold badges26 silver badges38 bronze badges

Comments

Majed Badawi · Accepted Answer · 2020-04-30 21:20:05Z

0

Try this:

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

answered Apr 30, 2020 at 21:20

Majed Badawi

28.5k4 gold badges30 silver badges56 bronze badges

Collectives™ on Stack Overflow

Vue Conditional Class Binding

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related