CODEWITHSUNDEEP
javascriptvue.jsvuejs2vue-component
Brayden
Brayden

Reputation: 125

Conditionally styling an array value from an API

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

Answers (3)

Sunil
Sunil

Reputation: 11241

You can parse the string value and convert it to float value which can be compared with 0.

html

<div :class="{ positive: isPositive(info.percent_change) }" 
      v-html="info.percent_change"></div> </li>

ts

public isPositive(v:string){
   return parseFloat(v) > 0; //parseFloat will ignore the %
}

Upvotes: 0

Boussadjra Brahim
Boussadjra Brahim

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

Francis Nepomuceno
Francis Nepomuceno

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

Related Questions