Vue.js dynamic <style> + variables

user_9750176 0
Viewed 575

I want to pass a dynamic variable into style, is that possible? I tried this way but it didn't work:

:style="{'width':`${parseInt(100 * task.progress)}`% ;}"

This is my task.vue:

 <tr  v-for="task in tasks.data "  v-if=" task.projet_id == key "   :key="task.id">
       <td >{{ parseInt(100 * task.progress) }}% <div class="progress">
       <div class="progress-bar bg-success" role="progressbar" aria-valuenow="0" :style=" 
        {'width':`${parseInt(100 * task.progress)}`% ;}"  id="progress" 
       aria-valuemin="`${parseInt(100 * task.progress)}`" aria-valuemax="100"></div>
       </div>             
       </td>
vuejs2 vue.js css html javascript
3 Answers

It looks alright except for some syntax errors:

:style="{'width': `${parseInt(100 * progress)}%`}"
  • The binding is to an object, so a ; would be out of place
  • The % needs to be inside the string
user_21850930

There sure is a way to do what you are looking for, I linked a demo for you.

Lets look deeper

We can take a look at your v-bind syntax

<div class="progress-bar bg-success" role="progressbar" aria-valuenow="0" :style=" 
        {'width':`${parseInt(100 * task.progress)}`% ;}"  id="progress" 
       aria-valuemin="`${parseInt(100 * task.progress)}`" aria-valuemax="100"></div>
       </div>

I'll simplify this a little bit

<div 
    :style="{'width':`${parseInt(100 * task.progress)}`% ;}">
</div>

Here I can see that you've bound style to the expression

{'width':`${parseInt(100 * task.progress)}`% ;}

we can see that you're creating an Object with key width and who's value is another expression

`${parseInt(100 * task.progress)}`%

here we see the use of template literals, a feature of vanilla javascript.

Template literals are enclosed by the backtick (` `)

Template literals can contain placeholders

[Placeholders] are indicated by the dollar sign and curly braces (${expression})

When javascript sees this this syntax, the expression is evaluated, and this is where we find the first syntax error

//In
`${parseInt(100 * task.progress)}`%

//The expression is "parseInt(100 * task.progress)"
//simplifying we get
`${expression}`%

//and we know that `${expression}` is a string

It might be easier to see now that

"string"%

Doesn't make syntacitical sense. The solution? Put the % inside the template literal

`${parseInt(100 * task.progress)}%`

Simple enough

moving back up

{'width':`${parseInt(100 * task.progress)}`% ;}

can be changed to

{'width':`${parseInt(100 * task.progress)}%` ;}

but ; don't belong in object. For example, {'attr':'1';} is invalid. That leaves us with

{'width':`${parseInt(100 * task.progress)}%`}

fin

as a challenge to the reader, this is equivalent

:style="{'width':parseInt(100 * task.progress)}+'%'}"

The links provided should be enough to help understand.

TLDR: You have a syntax error; :style="{'width':`${parseInt(100 * task.progress)}%`}" works

user_130288140

Yes it is possible to add variables inside style. In your case the % should be inside the quotes.

<tr  v-for="task in tasks.data "  v-if=" task.projet_id == key "   :key="task.id">
       <td >{{ parseInt(100 * task.progress) }}% <div class="progress">
       <div class="progress-bar bg-success" role="progressbar" aria-valuenow="0" :style=" 
        {'width':`${parseInt(100 * task.progress)}%`}"  id="progress" 
       aria-valuemin="`${parseInt(100 * task.progress)}`" aria-valuemax="100"></div>
       </div>             
</td>

It is not needs to include ; while adding style since the style data is an object and will be separated by commas like this

:style="{'width':`${parseInt(100 * task.progress)}%`, color:'red'}"
user_79175210
Related