Vue.Js Dynamic <Style> with Variables

Vue.js dynamic style + variables

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

change the style of element dynamically using VUEJS

This works for me:

<template>
  <div id="squar" v-if="showSquar" :style="{ top: top + 'px' }">
    click here
  </div>
</template>

<script>
export default {
  data() {
    return {
      showSquar: true,
      top: 200
    };
  }
};
</script>
<style scoped>
#squar {
  width: 100px;
  height: 100px;
  border-radius: 5px;
  background: rgb(0, 70, 40, 0.8);
  color: white;
  text-align: center;
  vertical-align: middle;
  line-height: 100px;
  position: absolute;
}
</style>

Passing dynamic styles to my element in VueJS

why not just use :

  <div id="trackerBarActual" v-bind:style="barWidthCalculated">

  computed: {
    barWidthCalculated: function(){
      return {
        width: (this.numQuotes * 10) + '%', 
        color: 'red' 
      };
    }

How to use dynamic style in vueJs

v-bind can help you with dynamic styling in vue.js as explained [here][1].

The object syntax for v-bind:style is pretty straightforward - it looks almost like CSS, except it’s a JavaScript object. You can use either camelCase or kebab-case (use quotes with kebab-case) for the CSS property names:

HTML

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

vue instance

data: {
  activeColor: 'red',
  fontSize: 30
}

Now activeColor is reactive here, whenever you change activeColor it will change in the HTML/CSS as well.
[1]: https://v2.vuejs.org/v2/guide/class-and-style.html#Object-Syntax-1

Using Vue variables in styles

You can achieve it using a CSS variable on your main div element

<template>
  <div class="cl" :style="'--p-height: ' + val"></div>
</template>

<script>
  export default {
    data() {
      return {
        val: '30px'
      }
    } 
  }
</script>

<style>
.cl p {
  height: var(--p-height);
}
</style>

Here's a jsfiddle

Dynamic CSS property of inline style in Vue

You can use the ternary operator (in case computed properties are not working)
For example:

<span
class="description"
:class="darkMode ? 'dark-theme' : 'light-theme'"

>

Hope this help.

Dynamically change style of variable displayed in vue component

Apply some styling if the ternary (? operator) returns true. Otherwise don't apply any styles at all.

<div v-for"element in example" :id="element+'id'" :style="element.includes('[some text]') ? 'custom-css-styles-here' : ''">
    {{ element }}
</div>

---

Related Topics