Condition in v-bind:Style
vue.jsVuejs2vue.js Problem Overview
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">
vue.js Solutions
Solution 1 - vue.js
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 - vue.js
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 - vue.js
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 - vue.js
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'
}
}
Solution 5 - vue.js
this worked for me
<div :style="[ myboolean ? { backgroundImage: `url(${group.backgroundImage.sourceUrl})` } : null ]">
Solution 6 - vue.js
If you're iterating through an object, you can use a method. In such cases when the style is dependent on a property in the object, this is the only option I have found .... none of the options above work.
<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'`
}
}
Solution 7 - vue.js
For Background Color you have to pay special attention you can't use
:style="[ isDark ? {background-color: 'black'}: {background-color: 'white'}]"
it won't work you can use the backgroundColor
:style="[ isDark ? {backgroundColor: 'black'}: {backgroundColor: 'white'}]"
Solution 8 - vue.js
If you want to use not just Boolean conditional but also numbers. this worked for me.
:style="{ transform: `translate(${x}vw)` }"
Solution 9 - vue.js
In quasar framework
V-bind:style=" $q.screen.lt.md ? 'height:600px' : ''"