Inline css on vue component

Question

I'm trying to apply a background-color on a div in vue and I'm able to pass in a hex_code from my data but I want to apply a rgba styling to the background. Is there something wrong with my syntax here?

      <div
        v-for="item in itemList"
        :style="{ 'background-color': `rgba(${ item.hex_code }, 0.5)` }"
        :key="item.id">
     </div>

Aurea · Accepted Answer · 2019-01-21 19:51:33Z

5

Yes, rgba(hex, opacity) is not allowed in CSS (but it is possible in SCSS), it has to be rgba(red, green, blue, opacity). You want something like:

:style="{ 'background-color': `rgba(${ item.red }, ${ item.green }, ${ item.blue }, 0.5)` }"

See also conversion between RGB and hex.

Edit: Since you are doing this in a bound attribute, you can define a helper function to convert your hex_code to RGB suitable for CSS:

:style="{ 'background-color': `rgba(${hexCodeToCSSRGB(item.hex_code)}, 0.5)` }"

With this helper function (adapted from the linked answer):

function hexToRgb(hex) {
  var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  return result
    ? `${parseInt(result[1], 16)}, ${parseInt(result[2], 16)}, ${parseInt(result[3], 16)}`
    : "0, 0, 0";
}

Note that this will convert "#ff00aa" to "255, 0, 170", so in your background-color, you would end up with rgba(255, 0, 170, 0.5).

edited Jan 21, 2019 at 19:51

answered Jan 21, 2019 at 19:43

Aurea

8,0261 gold badge23 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Inline css on vue component

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related