Vue.js : Liaison conditionnelle de style de classe

Question

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

{{ content['term_goes_here'] }}

... et ceci évalué à soit true o false . J'aimerais ajouter une classe en fonction de la véracité de l'expression, comme suit :

<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 dois-je l'écrire pour pouvoir déterminer conditionnellement la classe ?

Answer 1

Utilisez le syntaxe des objets .

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

Lorsque l'objet devient plus compliqué, il faut l'extraire 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 pourriez faire en sorte que cela fonctionne pour n'importe quelle propriété de contenu comme ceci.

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 ajouter en calculée :

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

Answer 3

Pourquoi ne pas passer un objet à v-bind:class pour basculer dynamiquement la classe :

<div v-bind:class="{ disabled: order.cancelled_at }"></div>

C'est ce qui est recommandé par le Documentation sur Vue .

Answer 4

Le problème est une lame, essayez ceci

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

Answer 5

Vous pouvez utiliser un modèle de chaîne de caractères comme avec des backticks `` :

:class="`${content['cravings'] ? 'fa-checkbox-marked' : 'fa-checkbox-blank-outline'}`"