CODEWITHSUNDEEP
javascriptcssvue.js
DMrFrost
DMrFrost

Reputation: 911

Passing dynamic styles to my element in VueJS

I am trying to make a type of progress bar to track a percentage of tasks completed. I want to v-bind:styles and pass it {width: dynamicWidth + '%'} in order to control the progression of this bar. So far I have created a computed variable that will return the percentage complete I want to bar to display, and I have set up my dynamic style in the data object 

  export default{
    data: function () {
      return {
        numQuotes: dataBus.numQuotes,
        numberA: 30,
        barWidth: {
          width: this.barWidthCalculated +'%'
        }
      }
    },
    computed: {
      barWidthCalculated: function(){
        return this.numQuotes * 10;
      }
    }
  }

I also added an element to the DOM to see what was happening.

  <div id="trackerBar">
        <div id="trackerBarActual" v-bind:style="barWidth">
            <h2>{{numQuotes}}/10</h2>
            <p>{{barWidthCalculated}}</p>
        </div>
    </div>

My bar stays fixed at 100%, i dont see any interpolation on the DOM. I also established another NUMBER variable in my data section and attempted to pass that to my width property, but still no change, and no rendering on the DOM. However if I pass any other elements in my styles object such as 

color: 'red'

Those changes take place. Also if I pass my styles object a number directly ie...

  barWidth: {
        width: 50 +'%'
  }

It displays correctly on the DOM.

What am I missing/doing wrong?

Upvotes: 3

Views: 3954

Answers (1)

AirNoir
AirNoir

Reputation: 251

why not just use :

  <div id="trackerBarActual" v-bind:style="barWidthCalculated">

  computed: {
    barWidthCalculated: function(){
      return {
        width: (this.numQuotes * 10) + '%', 
        color: 'red' 
      };
    }

Upvotes: 7

Related Questions