I am currently working on developing a custom progress bar to visualize the percentage of completed tasks. The approach I am taking involves using v-bind:styles and passing {width: dynamicWidth + '%'} to regulate the progression of the bar. To achieve this, I have implemented a computed variable that calculates the desired completion percentage for the bar to display, along with setting up the dynamic style within the data object.
export default{
data: function () {
return {
numTasks: taskData.numTasks,
numberA: 30,
barWidth: {
width: this.calculatedBarWidth +'%'
}
}
},
computed: {
calculatedBarWidth: function(){
return this.numTasks * 10;
}
}
}
To monitor the behavior of the progress bar, I have included an element in the DOM.
<div id="progressBar">
<div id="actualProgressBar" v-bind:style="barWidth">
<h2>{{numTasks}}/10</h2>
<p>{{calculatedBarWidth}}</p>
</div>
</div>
Despite my efforts, the bar remains static at 100% without any updates on the DOM. I even tried introducing another numerical variable in the data section and assigning it to the width property, yet the rendering did not change. Interestingly, if I include other properties within the styles object such as
color: 'red'
It reflects the changes correctly. Moreover, directly inputting a number into the styles object like so...
barWidth: {
width: 50 +'%'
}
Produces the intended display on the DOM.
What could I be overlooking or doing incorrectly?