Condition in v-bind:Style

I have an easy question for which I hope you could help:

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

I want the style attribute 'background' to return color if the URL from API is undefined

Example:

If item.featured_photo is not null:

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

If item.featured_photo is null:

<figure style="background: #FFF">

Solution 1:

Use condition in V-bind:style VueJS:

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

Here is the minimal example,

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

If you need Parent-Child-Conditions, then this is the magic:

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

In short of:

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

Hope it helps!

Solution 2:

The previous references were very good, but for me what really worked was this:

<input type="text" 
v-bind:style=" boolVariable ? 'border: 1px solid orange;' : 'border: none;' ">

In the documentation: https://vuejs.org/v2/guide/syntax.html#Using-JavaScript-Expressions

Regards!

Solution 3:

Feed Git's answer is perfect, here's another example with multiple attributes. Just separate with commas:

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

The form follows (for someone like me who's new at this):

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

Solution 4:

Use a computed property for this:

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

Edit:

I'm making a bunch of assumptions here with your API and routes. This is a rough stab at generalizing it:

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