I am trying to make a type of progress bar to track a percentage of tasks pleted. 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 puted variable that will return the percentage plete 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 +'%'
        }
      }
    },
    puted: {
      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?

I am trying to make a type of progress bar to track a percentage of tasks pleted. 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 puted variable that will return the percentage plete 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 +'%'
        }
      }
    },
    puted: {
      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?

• javascript
• css
• vue.js

1 Answer 1

why not just use :

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

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