How to apply conditional class styling in Vue?

Question

I have some data that is accessible via:
{{ content['term_goes_here'] }}

.... and this evaluated to either true or false. I'd like to add a class depending on the truthiness of the expression like so:
<i class="fa" v-bind:class="[{{content['cravings']}} ? 'fa-checkbox-marked' : 'fa-checkbox-blank-outline']"></i>

where true gives me the class fa-checkbox-marked and false would give me fa-checkbox-blank-outline. The way I wrote it above gives me an error:
- invalid expression: v-bind:class="[{{content['cravings']}} ? 'fa-checkbox-marked' : 'fa-checkbox-blank-outline']"

How should I write it to be able to conditionally determine the class?

Aditya Agrawal · Accepted Answer

Use the object syntax. v-bind:class="{'fa-checkbox-marked': content['cravings'], 'fa-checkbox-blank-outline': !content['cravings']}" When the object gets more complicated, extract it into a method. v-bind:class="getClass()" methods:{ getClass(){ return { 'fa-checkbox-marked': this.content['cravings'], 'fa-checkbox-blank-outline': !this.content['cravings']} } } Finally, you could make this work for any content property like this. v-bind:class="getClass('cravings')" methods:{ getClass(property){ return { 'fa-checkbox-marked': this.content[property], 'fa-checkbox-blank-outline': !this.content[property] } }

Chris Gregori · Answer

The problem is blade, try this

Vue JS

Similar Questions

How to access child component's data from parent in VueJS?

How to emit event from grand child to his grand parent component in VueJs 2.0?

Getting Error: Interpolation inside attributes has been removed. Use v-bind or the colon shorthand. Vue.JS 2.0

On a mission to build Next-Gen Community Platform for Developers

Facebook

Twitter

Linkedin

Instagram