Change CSS class property with Vue.js

Question

I'm using Vue.js and I want to change a CSS class property. The HTML code which uses the class is the following:

<div class="fillTimerBar"></div>

And the CSS code:

.fillTimerBar {
        width: 100%;
        height: 8px;
 }

From there I want to change the width class property using a computed property from the Vue component.

Which would be correct way if any?

Solution 1

You have to use v-bind:style directive.

var vm = new Vue({
  el: '#example',
  data: {
     width:'200px'
  },
  computed: {
    computedWidth: function () {
      return this.width;
    }
  },
  methods: {
    changeWidth: function (event) {
      this.width='100px';
    }
  }
})

#myDiv{
  background-color:red;
  height:200px;
}

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>

<div id="example">
  <div id="myDiv" v-bind:style="{ width: computedWidth }"></div>
  <button v-on:click="changeWidth()">Change</button>
</div>

Solution 2

To change a property inside a class, you can use CSS custom properties:

.fillTimerBar {
    --width: 100%;
    width: var(--width);
    height: 8px;
}

In Vue, you can bind CSS variables to the style:

<div class="fillTimerBar" :style="`--width: ${computedWidth}`"></div>