Tengo algunos datos que son accesibles a través de:
{{ content['term_goes_here'] }}
... y esto se evalúa como true
o false
. Me gustaría añadir una clase en función de la veracidad de la expresión así:
<i class="fa" v-bind:class="[{{content['cravings']}} ? 'fa-checkbox-marked' : 'fa-checkbox-blank-outline']"></i>
donde true
me da la clase fa-checkbox-marked
y false me daría fa-checkbox-blank-outline
. La forma en que lo escribí arriba me da un error:
- invalid expression: v-bind:class="[{{content['cravings']}} ? 'fa-checkbox-marked' : 'fa-checkbox-blank-outline']"
**¿Cómo debería escribirlo para poder determinar condicionalmente la clase?
Utilice la sintaxis del objeto.
v-bind:class="{'fa-checkbox-marked': content['cravings'], 'fa-checkbox-blank-outline': !content['cravings']}"
Cuando el objeto se complica, extraerlo en un método.
v-bind:class="getClass()"
methods:{
getClass(){
return {
'fa-checkbox-marked': this.content['cravings'],
'fa-checkbox-blank-outline': !this.content['cravings']}
}
}
Por último, usted podría hacer que esto funcione para cualquier propiedad de contenido como este.
v-bind:class="getClass('cravings')"
methods:{
getClass(property){
return {
'fa-checkbox-marked': this.content[property],
'fa-checkbox-blank-outline': !this.content[property]
}
}
}
el problema es la hoja, pruebe esto
<i class="fa" v-bind:class="['{{content['cravings']}}' ? 'fa-checkbox-marked' : 'fa-checkbox-blank-outline']"></i>