Vue.js: Warunkowe klasa stylizacji

Question

mam pewne dane, które są dostępne za pośrednictwem:

{{ content['term_goes_here'] }} 

... i to oceniać albo true lub false. Chciałbym dodać klasę w zależności od truthiness wyrażenia tak:

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

gdzie true daje mi klasę fa-checkbox-marked i fałszywe dałby mi fa-checkbox-blank-outline. Sposób napisałem powyżej to daje mi błąd:

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

Jak powinienem napisać, że jest w stanie określić klasę warunkowo?

Answer 1

Użyj object syntax.

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

Gdy obiekt staje się bardziej skomplikowany, wyodrębnij go do metody.

v-bind:class="getClass()" 

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

Wreszcie, możesz zrobić to działa dla dowolnej właściwości treści takiej jak ta.

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> 

i dodać w wyliczona:

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

Answer 3

problem jest ostrze, spróbuj tego

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