Tengo una pregunta fácil para el que espero que pueda ayudar:

<div>
  <figure :style="{ 'background': 'url(' + item.main_featured + ') center no-repeat' }">
</div>

Quiero el atributo style ‘de fondo’ para volver de color si la dirección URL de la API no está definido

Ejemplo:

Si el elemento.featured_photo no es nulo:

<figure style="background: url('localhost:6969/image.img') center no-repeat">

Si el elemento.featured_photo es nulo:

<figure style="background: #FFF">
InformationsquelleAutor KitKit | 2018-01-26

5 Comentarios

  1. 56

    Uso de la condición en la V-bind:estilo VueJS:

    v-bind:style= "[condition ? {styleA} : {styleB}]"
    

    ==>

    <figure :style="[item.main_featured ? {'background': 'url(' + item.main_featured + ') center no-repeat'} : {'background': '#FFF'}]">
    

    Si usted necesita Padre-Hijo-de las Condiciones de, entonces esta es la magia:

    v-bind:style= "[condition_1 ? condition_2 ? {styleA} : {styleB} : {styleC}]"
    

    En corto de:

    if (condition_1) {
       if (condition_2) {
          return styleA
       } else {
          return styleB
       }
    } else {
      return styleC
    }
    

    Espero que ayude!

  2. 3

    Utilizar un calculada de la propiedad para este:

    <figure :style="'{ background: `${background}` }'">
    
    ...
    
    data () {
        return {
            item: {
               featured_photo: null
            }
         }
    },
    computed: {
        background () {
            return !item.featured_photo ? '#fff' : `url(${item.featured_photo}) center no-repeat`
        }
    },
    methods: {
        setPhoto(val) {
             this.item.featured_photo = val
        }
    }
    

    Edición:

    Estoy haciendo un montón de suposiciones aquí con su API y rutas. Este es un burdo intento de generalizar que:

    <figure :style="'{ background: `${getBackground('main_featured')}` }'">
    <figure :style="'{ background: `${getBackground('featured_photo', 1)}` }'">
    <figure :style="'{ background: `${getBackground('featured_photo', 2)}` }'">
    
    
    ...
    
    methods: {
         async getBackground (type, index) {
              let r = await axios.get(`/images/${type}/${index}`).then(r => r.data.background)
              return r || '#fff'
         }
     }
    
    • De todos modos más corto bro !!
    • Sí, probablemente, ¿cómo hace la llamada a la API?
    • Me fijo. Vamos a ver mi respuesta a continuación. De todas formas muchas Gracias!!
  3. 1

    De alimentación Git respuesta es perfecto, he aquí otro ejemplo con varios atributos. Acaba de separar con comas:

    :style="[printing ? {'margin' : '0px 0px 20px 0px', 'min-height': '830px', 'box- shadow': 'none', 'border': 'none'} : {'margin': '0px 0px 20px 0px', 'min-height': '830px'}]
    

    El formulario de la siguiente manera (para alguien como yo, que hay de nuevo en esto):

    :style="[boolVariable ? { true } : { false }]
    
  4. 0

    Si usted está iterando a través de un objeto, se puede utilizar un método. En tales casos, cuando el estilo es dependiente de una propiedad en el objeto, esta es la única opción que he encontrado …. ninguna de las opciones anteriores.

    <div v-for="thing in things">
       <div :style="'{ background: `${background(thing)}` }'"></div>
    </div>
    ...
    
    data () {
        return {
            item: {
               featured_photo: null
            }
         }
    },
    methods: {
        background (thing) {
            return thing ? 'red' : 'black'`
        }
    }
    

Dejar respuesta

Please enter your comment!
Please enter your name here