Vue js switch css class

Question

I am using vuejs and I would like to switch my class depending on the data value. If its a negative number, i would like to use the .neg class and when its a positive number, i would like to use the .pos class.

Everything is working, except for adding the class.

The data looks like this: 5, -7, 8, -2, 4, -9 ect

myArray: function () {
  var test =  [5, -7, 8, -2, 4, -9];
  return test;
},

<div v-for="data in myArray">
  <div v-bind:class="{'neg': data < 0, 'pos': data > 0}"></div>
  <div id="my">{{ data }}</div>
</div>

.pos {background-color: green;}
.neg {background-color: red;}

Any help would be appropriated.

Shouldn't it be data in myArray()? Also, I wouldn't keep re-using the "my" id in the loop. You'll end up with duplicates — Phil
– Phil, Commented Nov 1, 2017 at 0:04
Seems to work ok here ~ jsfiddle.net/o49x5de0/2. Could it possibly be that your neg / pos classed elements have no content? — Phil
– Phil, Commented Nov 1, 2017 at 0:10
Thanks Phil, would give you an up vote if i could. My issue was myArray(). When i changed it, it worked — charm Geld
– charm Geld, Commented Nov 1, 2017 at 12:26

haMzox · Accepted Answer · 2017-11-01 05:52:01Z

3

Since, myArray is returning a value (an array). Replace myArray with myArray()

<div v-for="data in myArray">
  <div :class="{'neg': data < 0, 'pos': data > 0}"></div>
  <div id="my">{{ data }}</div>
</div

answered Nov 1, 2017 at 5:52

haMzox

2,1091 gold badge15 silver badges25 bronze badges

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

Collectives™ on Stack Overflow

Vue js switch css class

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related