2

If you bind the following background styles with v-bind:style for cross browsers:

background: #fc00ff;
background: -webkit-radial-gradient(circle at top left, #00dbde, #fc00ff);
background: radial-gradient(circle at top left, #00dbde, #fc00ff);

Vue only takes the last line in the style above:

background: radial-gradient(circle at top left, #00dbde, #fc00ff);

Is this intentional or is it a bug?

If it is intentional, then you cannot fall back to background: #fc00ff; if the browser does not support the CSS gradient?

1 Answer 1

3

That's the result of using JavaScript's object syntax. You cannot have multiple properties with the same name.

<div v-bind:style="{
  background: '#fc00ff',
  background: '-webkit-radial-gradient(circle at top left, #00dbde, #fc00ff)',
  background: 'radial-gradient(circle at top left, #00dbde, #fc00ff)',
}">Object syntax</div>

Vue provides a solution in version 2.3.0. You can specify multiple values for a single property by passing an array. Vue will use the last value in the array that the browser supports:

<div v-bind:style="{
  background: ['#fc00ff', '-webkit-radial-gradient(circle at top left, #00dbde, #fc00ff)', 'radial-gradient(circle at top left, #00dbde, #fc00ff)']
}">Supported in 2.3.0+</div>

Read more about it here: https://v2.vuejs.org/v2/guide/class-and-style.html#Multiple-Values

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.