Tengo algunos datos a los que se puede acceder a través de:
{{ content['term_goes_here'] }} ... y esto se evaluó como true o false . Me gustaría agregar una clase dependiendo de la veracidad de la expresión de esta manera:
<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 debo escribirlo para poder determinar condicionalmente la clase?
Utilice la sintaxis de objetos .
v-bind:class="{'fa-checkbox-marked': content['cravings'], 'fa-checkbox-blank-outline': !content['cravings']}"Cuando el objeto se vuelva más complicado, extráigalo en un método.
v-bind:class="getClass()" methods:{ getClass(){ return { 'fa-checkbox-marked': this.content['cravings'], 'fa-checkbox-blank-outline': !this.content['cravings']} } }Finalmente, podría hacer que esto funcione para cualquier propiedad de contenido como esta.
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>y agregue en calculado:
computed: { cravings: function() { return this.content['cravings'] ? 'fa-checkbox-marked' : 'fa-checkbox-blank-outline'; } }¿Por qué no pasar un objeto a v-bind:class para alternar dinámicamente la clase?
<div v-bind:class="{ disabled: order.cancelled_at }"></div>Esto es lo que recomiendan los documentos de Vue .