Vue.js: enlace de estilo de clase condicional

3 minutos de lectura

avatar de usuario
jeremy thomas

Tengo algunos datos a los que se puede acceder a través de:

{{ content['term_goes_here'] }}

… y esto se evaluó a cualquiera 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>

dónde true me da la clase fa-checkbox-marked y falso 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?

avatar de usuario
Berto

Utilizar el 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]
    }
  }
}

  • Refactoricé a: <i class="fa" :class="[{ 'fa-checkbox-marked': content['cravings'] }, 'fa-checkbox-blank-outline']"></i>

    –Jeremy Thomas

    4 de abril de 2017 a las 14:52

  • @JeremyThomas Iría con la sintaxis de la matriz o la sintaxis del objeto, pero probablemente no ambas.

    – Berto

    4 de abril de 2017 a las 14:54

  • sí, me sorprendió un poco ver esa sintaxis mixta en sus documentos. no es un fan.

    – dave

    16 de noviembre de 2017 a las 21:34

  • ¿Cómo puede activar el enlace de clase para que se actualice cuando las propiedades observadas provienen de una fuente externa, como un vue-router ¿cambio? (ex: this.$router.push('/homepage') llamado en otro lugar en otro componente)

    – chambelánpi

    12 abr 2018 a las 23:21

  • @bigp Espero que puedas verlo $route para los cambios y cambiar sus clases según sea necesario. router.vuejs.org/en/api/route-object.html

    – Berto

    13 de abril de 2018 a las 0:40

<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';
    }
}

  • Tendría que tener demasiados métodos ya que hay unos 20 términos diferentes

    –Jeremy Thomas

    4 de abril de 2017 a las 14:53

  • Vote por computado, es mucho más limpio que tener expresiones dentro de las etiquetas html.

    – Johncl

    13 de noviembre de 2018 a las 7:36

avatar de usuario
kaleazy

¿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 recomienda el documentos de vue.

avatar de usuario
Julio César Montenegro

el problema es la hoja, prueba esto

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

si desea aplicar clases css separadas para el mismo elemento con condiciones en Vue.js
puede usar el método dado a continuación. Funcionó en mi escenario.

html

 <div class="Main" v-bind:class="{ Sub: page}"  >

aquí, Principal y Sub son dos nombres de clase diferentes para el mismo elemento div.
enlace v: clase La directiva se usa para vincular la subclase aquí.
página es la propiedad que usamos para actualizar las clases cuando cambia su valor.

js

data:{
page : true;
}

aquí podemos aplicar una condición si lo necesitamos. entonces, si la propiedad de la página se vuelve verdadera, el elemento irá con Principal y Sub clases de estilos css. pero si es falsa solo Principal Se aplicarán estilos css de clase.

  • La respuesta más comprensible.

    – MattSom

    28 de febrero a las 15:44

avatar de usuario
Boussadjra Brahim

Podría usar una plantilla de cadena como con acentos graves “ :

:class="`${content['cravings'] ? 'fa-checkbox-marked' : 'fa-checkbox-blank-outline'}`"

  • La respuesta más comprensible.

    – MattSom

    28 de febrero a las 15:44

¿Ha sido útil esta solución?

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Configurar y más información
Privacidad