Vue.js: stile della class condizionale

Ho dei dati accessibili tramite:

{{ content['term_goes_here'] }} 

… e questo valutato a true o false . Mi piacerebbe aggiungere una class in base alla veridicità dell’espressione in questo modo:

  

dove true mi dà la class fa-checkbox-marked e false mi darebbe fa-checkbox-blank-outline . Il modo in cui l’ho scritto sopra mi dà un errore:

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

Come dovrei scrivere per essere in grado di determinare condizionatamente la class?

Usa la syntax dell’object .

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

Quando l’object diventa più complicato, estrailo in un metodo.

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

Infine, potresti fare in modo che funzioni per qualsiasi proprietà di contenuto come questa.

 v-bind:class="getClass('cravings')" methods:{ getClass(property){ return { 'fa-checkbox-marked': this.content[property], 'fa-checkbox-blank-outline': !this.content[property] } } } 
  

e aggiungi in computed:

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

il problema è la lama, prova questo

  

Perché non passare un object a v-bind: class per passare dynamicmente alla class:

 

Questo è ciò che è raccomandato dai documenti Vue .