Ich habe einige Daten, die über zugänglich sind:
{{ content['term_goes_here'] }}
... und das Ergebnis ist entweder true
oder false
. Ich möchte eine Klasse hinzufügen, die von der Wahrhaftigkeit des Ausdrucks abhängt, etwa so:
<i class="fa" v-bind:class="[{{content['cravings']}} ? 'fa-checkbox-marked' : 'fa-checkbox-blank-outline']"></i>
wobei true
mir die Klasse fa-checkbox-marked
gibt und false würde mir fa-checkbox-blank-outline
geben. So wie ich es oben geschrieben habe, bekomme ich einen Fehler:
- invalid expression: v-bind:class="[{{content['cravings']}} ? 'fa-checkbox-marked' : 'fa-checkbox-blank-outline']"
Wie sollte ich es schreiben, damit ich die Klasse bedingt bestimmen kann?
Verwenden Sie die Objektsyntax.
v-bind:class="{'fa-checkbox-marked': content['cravings'], 'fa-checkbox-blank-outline': !content['cravings']}"
Wenn das Objekt komplizierter wird, extrahieren Sie es in eine Methode.
v-bind:class="getClass()"
methods:{
getClass(){
return {
'fa-checkbox-marked': this.content['cravings'],
'fa-checkbox-blank-outline': !this.content['cravings']}
}
}
Schließlich könnte man dies für jede beliebige Inhaltseigenschaft wie folgt umsetzen.
v-bind:class="getClass('cravings')"
methods:{
getClass(property){
return {
'fa-checkbox-marked': this.content[property],
'fa-checkbox-blank-outline': !this.content[property]
}
}
}
<i class="fa" v-bind:class="cravings"></i>
und fügen Sie die berechneten:
computed: {
cravings: function() {
return this.content['cravings'] ? 'fa-checkbox-marked' : 'fa-checkbox-blank-outline';
}
}
das Problem ist die Klinge, versuchen Sie dies
<i class="fa" v-bind:class="['{{content['cravings']}}' ? 'fa-checkbox-marked' : 'fa-checkbox-blank-outline']"></i>