Vue - getting data attribute value in css

Question

Is there any option to get data attribute value in Vue css?

<template>
   <p data-background="purple"> TEST </p>
</template>

<style lang="scss">
p {
  background: attr(data-background); //error
  &:after {
     background: attr(data-background); //error
  }
}
</style>

Quentin · Accepted Answer · 2019-03-08 22:28:55Z

1

You could use CSS variables for this case.

new Vue({
  el: '#app',
  data: {
    elStyle: {
      '--background': 'lightblue',
    }
  }
});

p:after {
  content: 'A pseudo element';
  background: var(--background, red); // Red is the fallback value
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <p :style="elStyle"></p>
</div>

edited Mar 8, 2019 at 22:28

answered Mar 8, 2019 at 22:06

Quentin

3,2991 gold badge17 silver badges33 bronze badges

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

3 Comments

Knight Over a year ago

The problem is that I can't set background in :before and :after pseudo selectors.

Quentin Over a year ago

If you need to style pseudo elements, you can handle that with CSS custom properties.

Knight Over a year ago

Thanks for answer. Unfortunately I need to support IE11.

Collectives™ on Stack Overflow

Vue - getting data attribute value in css

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related