change class conditionally vue.js

Question

I have a table and I want to change the class depending on the value.

My first approach was to use v-bind:class="{} this will change to the right class if true. However doing like this I should create new elements for each value on my table which doesn't look like the best option.

Is there a way to use conditionals, like if {{value}} > 5 class:something

I wrote a small jsfiddle with how I got it working right now. The idea is that each element in the table will follow these rules without the need of write an if statement for each cell:

  if (this.v1 < 4) {
    this.goodBox = true
  } else if (this.v1 < 6) {
    this.goodBox = true
  } else {
    this.badBox = true
  }

Bert · Accepted Answer · 2017-05-18 22:07:51Z

1

I'm guessing a little on your intent, but something like this.

changeClass(value) {
  return {
    'good_box': value <= 4,
    'medium_box': value > 4 && value <= 6,
    'bad_box': value > 6
  }
}

Template

<table style="width:100%; border:1px solid black">
  <tr>
    <td :class="changeClass(v1)">{{v1}}</td>
    <td :class="changeClass(v2)">{{v2}}</td>
  </tr>
  <tr>
    <td :class="changeClass(v3)">{{v3}}</td>
    <td :class="changeClass(v4)">{{v4}}</td>
  </tr>
</table>

Updated fiddle.

answered May 18, 2017 at 22:07

Bert

82.6k17 gold badges205 silver badges166 bronze badges

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

Comments

Staszek · Accepted Answer · 2017-05-18 22:27:40Z

0

I would use v-for:

<div id="app">
  <table style="width:100%; border:1px solid black">
      <tr v-for="v in values" v-bind:class="{ good_box:v < 4, medium_box:v < 6, bad_box:v >= 6}">
        <td>{{v}}</td>
      </tr>
  </table>
</div>

And simpler app:

var test = new Vue({
  el: '#app',
  data: { 
    values:[
      3,
      5,
      20,
      15],
  },
});

fiddle

Of course you can do two v-for, to generate rows and columns, and modify your data to suit you needs.

You could also use methods for conditionals, but it's up to you.

answered May 18, 2017 at 22:27

Staszek

9632 gold badges14 silver badges29 bronze badges

Collectives™ on Stack Overflow

change class conditionally vue.js

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related