Условная стилизация значения массива из API

Question

Условная стилизация значения массива из API

1

Я собираю данные из API, который очень прост в использовании, значения процентного изменения могут быть как положительными, так и отрицательными. Я пытаюсь добавить класс к элементу, чтобы при отрицательном значении я мог отобразить класс и наоборот.

Вот то, что я попробовал до сих пор без удачи:

<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>

Код правильно отображает значение процента_безопасности, но не применяет к нему никакого класса, независимо от того, является он отрицательным или положительным.

Пример вывода без имен классов:

<li><div class="">0.8%</div></li>
<li><div class="">-6.57%</div></li>

Brayden 27 дек. 2018, в 20:31

Источник

1

почему name.percent_change а не info.percent_change ?
yuikonnu 27 дек. 2018, в 18:54
1

вы делаете опечатку, вы должны установить info.percent_change
Boussadjra Brahim 27 дек. 2018, в 18:54
0

Это все еще не решает проблему, я изменил некоторые формулировки вопроса. Да, это должен быть info.percent_change, но это все равно не заставит класс работать.
Brayden 27 дек. 2018, в 19:01
0

Не могли бы вы предоставить больше кода?
Boussadjra Brahim 27 дек. 2018, в 19:05
0

Я добавил больше кода + пример вывода. Спасибо за внимание, мне действительно нужно решение
Brayden 27 дек. 2018, в 19:12

Показать ещё 3 комментария

Теги:

javascript

vue.js

vuejs2

vue-component

3 ответа

0

Лучше сначала проанализировать значение, потому что оно сравнивает строку с 0 (ноль).

Что-то вроде { positive: parseFloat(info.percent_change) > 0 }

Neps 27 дек. 2018, в 17:09

0

Вы можете проанализировать строковое значение и преобразовать его в значение с плавающей запятой, которое можно сравнить с 0.

HTML

<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 %
}

Sunil Singh 27 дек. 2018, в 17:05

Ещё вопросы

почему name.percent_change а не info.percent_change ?
вы делаете опечатку, вы должны установить info.percent_change
Это все еще не решает проблему, я изменил некоторые формулировки вопроса. Да, это должен быть info.percent_change, но это все равно не заставит класс работать.
Не могли бы вы предоставить больше кода?
Я добавил больше кода + пример вывода. Спасибо за внимание, мне действительно нужно решение

Boussadjra Brahim · Accepted Answer · 2018-12-27T18-09-00.000Z

Вы должны очистить знак % используя replace('%','') следующим образом:

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

и метод выглядит так:

methods:{
    getNumValue(percent){
       return percent!=undefined?percent.replace('%',''):0;
    }
   ...
 }

Это имеет смысл, и я считаю, что это решение, но я получаю эту консольную ошибку: Ошибка при рендеринге: «Ошибка типа: Невозможно прочитать свойство« заменить »неопределенного», и ничего не отображается ». Возможно, мне нужно создать метод для этого?
я отредактирую свой ответ, добавив этот метод
Да, это сработало отлично! Большое спасибо за помощь, я действительно ценю это.