Vue.js dynamic <style> + variables

Question

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>

Community · Accepted Answer · 2020-06-20 09:12:55Z

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

Dan · Accepted Answer · 2020-04-04 11:39:50Z

3

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

answered Apr 4, 2020 at 11:39

Dan

63.5k18 gold badges113 silver badges122 bronze badges

Comments

Rijosh · Accepted Answer · 2020-04-04 11:39:57Z

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'}"

Collectives™ on Stack Overflow

Vue.js dynamic <style> + variables

3 Answers 3

Lets look deeper

moving back up

fin

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Lets look deeper

moving back up

fin

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related