Vue.js: Estilo de clase condicional

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?

Programación
conditional-formatting javascript vue.js vuejs2
4º abril 2017 в 2:45
No hay vistas aún
Solución

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]
    }
  }
}
Bert
Respuesta editada 4º abril 2017 в 3:15
Comentarios (5)

y añadir en computado:

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

el problema es la hoja, pruebe esto

Julio Cesar Montenegro
Respuesta editada 4º enero 2018 в 11:56
Comentarios (0)