Vue.js: style de classe conditionnelle

Question

J'ai des données qui sont accessibles via:

{{ content['term_goes_here'] }} 

... et cela a évalué soit true ou false. Je voudrais ajouter une classe en fonction du truthiness de l'expression comme ceci:

<i class="fa" v-bind:class="[{{content['cravings']}} ? 'fa-checkbox-marked' : 'fa-checkbox-blank-outline']"></i> 

où true me donne la classe fa-checkbox-marked et faux me donnerait fa-checkbox-blank-outline. La façon dont je l'ai écrit ci-dessus me donne une erreur:

- invalid expression: v-bind:class="[{{content['cravings']}} ? 'fa-checkbox-marked' : 'fa-checkbox-blank-outline']" 

Comment devrais-je écrire pour être en mesure de déterminer conditionnellement la classe?

Answer 1

Utilisez le object syntax.

v-bind:class="{'fa-checkbox-marked': content['cravings'], 'fa-checkbox-blank-outline': !content['cravings']}" 

Lorsque l'objet devient plus compliqué, extrayez-le dans une méthode.

v-bind:class="getClass()" 

methods:{ 
    getClass(){ 
     return { 
      'fa-checkbox-marked': this.content['cravings'], 
      'fa-checkbox-blank-outline': !this.content['cravings']} 
    } 
} 

Enfin, vous pouvez faire en sorte que cela fonctionne pour n'importe quelle propriété de contenu comme celle-ci.

v-bind:class="getClass('cravings')" 

methods:{ 
    getClass(property){ 
    return { 
     'fa-checkbox-marked': this.content[property], 
     'fa-checkbox-blank-outline': !this.content[property] 
    } 
    } 
} 

Answer 2

<i class="fa" v-bind:class="cravings"></i> 

et ajoutez calculé:

computed: { 
    cravings: function() { 
     return this.content['cravings'] ? 'fa-checkbox-marked' : 'fa-checkbox-blank-outline'; 
    } 
} 

Answer 3

le problème est la lame, essayez cette

<i class="fa" v-bind:class="['{{content['cravings']}}' ? 'fa-checkbox-marked' : 'fa-checkbox-blank-outline']"></i>