Vuejs String formatting not working correctly

Question

Hi am trying to style a div dynamically in VueJs.But facing this problem that the this.currentProgressLevel is not applied to the width property inside the currentStyle object.I am attaching the screenshot of code i am using. The width property is not working when i use ${this.currentProgressLevel *75}px Why it might not be working?When i change the this.currentProgressLevel with 0.33 manually it works but then it will be hardcoded, why the value is not taken from the data variable currentProgressLevel? Below is the code i am using:

In script :

data(){
return{
currentProgressLevel:.33,
currentStyle:{
width: ${this.currentProgressLevel *75}px ,
height:‘6px’,
background:‘green’
}
}}

Answer 1

You should turn currentStyle into computed like this:

computed: {
  currentStyle () {
    return {
      width: `${this.currentProgressLevel *75}px`,
      height:‘6px’,
      background:‘green’
    }
  }
}

Answer 2

For reactive data, you should move 'currentStyle' to computed. in this case, you just catch the initial value of 'currentProgressLevel'.

computed:{
  currentStyle(){
    return {
      width: ${this.currentProgressLevel *75}px ,
      height:‘6px’,
      background:‘green’
    }
  }
}