javascript - Passing dynamic styles to my element in VueJS -


i trying make type of progress bar track percentage of tasks completed. want v-bind:styles , pass {width: dynamicwidth + '%'} in order control progression of bar. far have created computed variable return percentage complete want bar display, , have set dynamic style in data object

  export default{     data: function () {       return {         numquotes: databus.numquotes,         numbera: 30,         barwidth: {           width: this.barwidthcalculated +'%'         }       }     },     computed: {       barwidthcalculated: function(){         return this.numquotes * 10;       }     }   } 

i added element dom see happening.

  <div id="trackerbar">         <div id="trackerbaractual" v-bind:style="barwidth">             <h2>{{numquotes}}/10</h2>             <p>{{barwidthcalculated}}</p>         </div>     </div> 

my bar stays fixed @ 100%, dont see interpolation on dom. established number variable in data section , attempted pass width property, still no change, , no rendering on dom. if pass other elements in styles object such

color: 'red' 

those changes take place. if pass styles object number directly ie...

  barwidth: {         width: 50 +'%'   } 

it displays correctly on dom.

what missing/doing wrong?

why not use :

  <div id="trackerbaractual" v-bind:style="barwidthcalculated">    computed: {     barwidthcalculated: function(){       return {         width: (this.numquotes * 10) + '%',          color: 'red'        };     } 

Comments

Popular posts from this blog

php - Vagrant up error - Uncaught Reflection Exception: Class DOMDocument does not exist -

vue.js - Create hooks for automated testing -

Add new key value to json node in java -