Menu
I have some rather cumbersome logic I would like to apply to an element class.
:class="{sportTypes.sports.indexOf(sport) > -1 ? 'is-primary' : 'is-outlined'}"
The above doesn't work, while the following does:
:class="{'is-outlined': sportTypes.sports.indexOf(sport) > -1}"
I get the following error
template syntax error - invalid expression:
Any ideas what's wrong with the first part?
545
'css-class-1' : 'css-class-2' . So ngClass still can use ternary operator in Angular 2.
To set className with ternary operator add class 'null' in React, we can set the class name to an empty string. We set className to 'on' if on is true and an empty string otherwise. And we set the the on class to have background color green.
Adding a dynamic class name is as simple as adding the prop :class="classname" to your component. Whatever classname evaluates to will be the class name that is added to your component. Join 11,067 other Vue devs and get exclusive tips and insights delivered straight to your inbox, every week.
You have unnecessary braces. The latter expression is an object whereas the first is simply a ternary expression that returns a string.
:class="sportTypes.sports.indexOf(sport) > -1 ? 'is-primary' : 'is-outlined'"
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
