Reputation: 125
I am grabbing data from an API that is very easy to utilize, the values for percent change can either be positive or negative. I am trying to add a class to the item so if the value is negative I can display a class and vice versa.
Here is what I've tried so far with no luck:
<li v-for="info in infos.slice(0, 5)"> -- Grabs first 5 items in API
<div :class="{ positive: info.percent_change > 0 }" v-html="info.percent_change"></div>
</li>
The code properly displays the percent_change value but does not apply any class to it regardless if it is negative or positive.
Sample output showing no class names:
<li><div class="">0.8%</div></li>
<li><div class="">-6.57%</div></li>
Upvotes: 1
Views: 114
Reputation: 11241
You can parse the string value and convert it to float value which can be compared with 0.
<div :class="{ positive: isPositive(info.percent_change) }"
v-html="info.percent_change"></div> </li>
public isPositive(v:string){
return parseFloat(v) > 0; //parseFloat will ignore the %
}
Upvotes: 0
Reputation: 1
You should clear %
sign using replace('%','')
as follows :
<div :class="{ positive: getNumValue(info.percent_change) > 0 }" v-html="info.percent_change"></div> </li>
and the method looks like :
methods:{
getNumValue(percent){
return percent!=undefined?percent.replace('%',''):0;
}
...
}
Upvotes: 1
Reputation: 5085
Better parse the value first because it's comparing string against 0 (zero).
Something like { positive: parseFloat(info.percent_change) > 0 }
Upvotes: 0