web-dev-qa-db-fra.com

Condition dans v-bind: Style - VueJS

J'ai une question facile pour laquelle j'espère que vous pourrez aider:

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

Je veux que l'attribut de style 'arrière-plan' renvoie la couleur si l'URL de l'API n'est pas définie

Exemple:

Si item.featured_photo n'est pas null:

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

Si item.featured_photo est null:

<figure style="background: #FFF">
vue.jsvuejs2
9
KitKit

Finalement, je l'ai trouvé!

Utilisez la condition dans V-bind: style VueJS:

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

==>

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

J'espère que ça aide!

31
KitKit

Utilisez une propriété calculée pour cela:

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

Modifier:

Je fais un tas d'hypothèses ici avec votre API et vos routes. C'est un coup dur pour le généraliser:

<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'
     }
 }
1
user320487

La réponse de Feed Git est parfaite, voici un autre exemple avec plusieurs attributs. Séparez simplement avec des virgules:

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

Le formulaire suit (pour quelqu'un comme moi qui est nouveau dans ce domaine):

:style="[boolVariable ? { true } : { false }]
0
Steven Pfeifer