CODEWITHSUNDEEP
cssvue.jsvue-component
charm Geld
charm Geld

Reputation: 49

Vue js switch css class

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.

Upvotes: 2

Views: 2492

Answers (1)

haMzox
haMzox

Reputation: 2109

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

Upvotes: 3

Related Questions