CODEWITHSUNDEEP
javascripthtmlcssvue.js
Deric Lima
Deric Lima

Reputation: 2092

Class binding a ternary and non-ternary attributes

Let's say I have a tag that uses a ternary operator to add alignment to it:

<td
  :class="alignment ? ('u-' + alignment) : null"
>

This works as expected since I have my pre-defined alignment classes with the number that I need, now I would like to add a new attribute in this tag, let's say I want to add the class u-bright if the prop isBright is true:

<td
  :class="{'u-bright' : isBright}"
>

How to keep both conditions in the same tag? Something like:

/** Obviously this doesn't work */
<td
  :class="{
    alignment ? ('u-' + alignment) : null,
    'u-bright' : isBright
  }"
>

Upvotes: 1

Views: 77

Answers (1)

Boussadjra Brahim
Boussadjra Brahim

Reputation: 1

Try to use the array syntax :

<td
  :class="[alignment ? ('u-' + alignment):'',  isBright?'u-bright':'']"
>

Upvotes: 2

Related Questions