How can I apply variable to css in VueJS [no inline-styling]

Question

I want to create a background color of body element that will dynamically change based on this.linearGradient. As you might see it should change a part of linear-gradient instead of replacing the entire linear-gradient. No inline-styling allows.

computed: {
  backgroundStyle () {
    return {
      '--linearGradient': this.linearGradient
    }
  }
},

<style>
background: linear-gradient(145.74deg, #9BDBFF -33.02%, #B4DEDA 52.01%, #FFD66B  var(--linearGradient)7.04%);
</style>

  <body :style="backgroundStyle">
    <div id="app"></div>
  </body>

Stark Buttowski · Accepted Answer · 2020-07-10 04:09:32Z

1

Please find the below snippet.

new Vue({
  el: "#app",
  template: '<div>bg-color<br/>Applied<input type="text" v-model="linearGradient" /></div>',
  data() {
    return {
      linearGradient: '#FFD66B'
    }
  },
  watch: {
    linearGradient: {
      immediate: true,
      handler(oldValue, newValue) {
        document.body.style.background = `linear-gradient(145.74deg, #9BDBFF -33.02%, #B4DEDA 52.01%,  ${oldValue} 7.04%)`
      }
    }
  },
  computed: {
    backgroundStyle: function() {
      return {
        background: `linear-gradient(145.74deg, #9BDBFF -33.02%, #B4DEDA 52.01%,  ${this.linearGradient} 7.04%)`
      }
    }
  }
})

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<div id="app"></div>

edited Jul 10, 2020 at 4:09

answered Jul 10, 2020 at 3:54

Stark Buttowski

1,8492 gold badges11 silver badges21 bronze badges

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

2 Comments

Frontend employee Over a year ago

How do I pass this to parent element. body element is in index.html instead of component....

Frontend employee Over a year ago

document.body.style.background contains a typo....but nevertheless this is exactly what I was looking for...

Collectives™ on Stack Overflow

How can I apply variable to css in VueJS [no inline-styling]

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related