Dynamically add styles from array Vue

Question

I have some progress bar the width of which are getting from data from the array. The color of this bar depends on the same data. There are 3 colors if progress is 0 the color is grey, more than 0 its blue, and if it 100 its should be green.

<div class="card-item" v-for="item in status" :key="item.id"> // loop
  <div class="progress-item">
    <span>{{item.progress}}%</span> // data from arr
      <div class="progress-bar">
        <div class="progress-bar-inner" :style="{width: item.progress}"></div> // width in style should in %
      </div>
  </div>
</div>

Maybe i should to write the function?

Steven Spungin · Accepted Answer · 2018-08-16 12:52:57Z

3

You can use a method or inline the logic in a style object.

If you only have 3 cases, I would use a conditional class instead of styles, though.

Here's a codepen that shows many possibilities: https://codepen.io/Flamenco/pen/gjNxXp?editors=1111

methods: {
 theColor(item){
  return item.length===0 ? 'grey' : item.length < 100 ? 'blue' : 'green'}
 }
}

<div>using inline style</div>
<div :style="{color: item.length===0 ? 'grey' : item.length < 100 ? 'blue' : 'green'}">...</div>

<div>using method</div>
<div :style="{color: theColor(item)}">...</div>

Using conditional class. Much easier to read, debug, maintain, and extend.

methods: {
  theClass(item) {
    if (item.length === 0) return 'none'
    else if (item.length < 100) return 'under'
    else return 'over'
  }
}

.none {
  color: grey;
}

.under {
  color: blue;
}

.over {
  color: green;
}

<div>A few ways to do this...</div>
<div :class='theClass(item)'>...</div>
<div :class='[theClass(item), "anotherClass"]'>...</div>
<div :class='{[theClass(item)]:true, anotherClass:true]}'>...</div>

edited Aug 16, 2018 at 12:52

answered Aug 16, 2018 at 12:30

Steven Spungin

29.5k7 gold badges97 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Terry Over a year ago

Awesome answer! Just to note: your second example in your last code snippet, you should be using double quotes somewhere otherwise you'll get a syntax error in your markup :)

Sasha Zoria Over a year ago

Great solution! Can you help me with width? The width of the progress bar should be in %, as it has position absolute and has to fill its parent due to progress value. I have tried width: item.progress, but its set the width only if the value is 0. Have any ideas?

Steven Spungin Over a year ago

@SashaZoria Try these: width: item.progress + '%' or width: ${item.progress}% <- stackoverflow is replacing my backticks...

Collectives™ on Stack Overflow

Dynamically add styles from array Vue

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related