Ребят привет, подскажите пожалуйста, мне в таблице надо подсвечивать строку

на мгновение, в зависимости от изменения числового значения
чет не соображу, onChange юзать? или есть лучше вариант?

watch

Как значения вводятся в таблицу?

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

Эм, не до конца понял, цвет меняется при каждом изменении или переходя какой-то порог значения?

Вотч тут не нужен. Присваиваешь класс или стиль каждой строке таблицы в зависимости от соответствующего числа, например: // .vue :class="myNumber" // any number // .css tr.1 {...} tr.2 {...} ...

при каждом изменении, в любую сторону +/- например блок белый, цена изменилась, блок стала зеленая на пол секунды, и сразу ворачивается белый цвет

1000 строк на странице(таблица большая) данные из стейта получаю через геттер - их в стейте меняет вебсокет соединение текущее число которое меняется получить могу через v-for чет не соображу как watch написать <Tr v-for="{ id, name, percentage } in data" :key="id" > <td class="px-2 py-1"> <div class="" :class="{ 'bg-red-400': percentage }"> {{ id }} {{ name }} </div> </td> </Tr> watch: { // onChange percentage? },

Вотч не нужен тут. Вот через запятую дальше пиши классы, только укажи условия свои: {'bg-red-400': percentage < 50, 'bg-green-200': percentage > 70} ...и тд.

При каждом изменении ему нужно подсвечивать поле, всм не нужен Вотч?

Не, мне надо не в зависимости от значения, а от факта изменения менять цвет, и через секунду обратно

Условными классами пишешь, и всё. Вотч только перегрузит.

А проверка числа каждый раз не перегрузит ничего?

Я не понимаю как условие написать (

Можешь создать геттер тогда в стейте, который будет определять, какой класс надо присвоить данной строке, а старое значение хранить в дополнительной переменной в том же стейте.

Да это по условию опять будет, а мне надо по факту изменания

<Tr v-for="{ id, name, percentage, animClass } in data" :key="id" > <td class="px-2 py-1"> <div :class="animClass"> {{ id }} {{ name }} </div> </td> </Tr>

Так ты пробегаешь по старым строкам, смотришь, какие из них изменились, и, в зависимости от этого, определяешь animClass.

Алгоритм: все сроки белого цвета в стейте измениллось числовое значение у какой то строки(массив объектов) строка изменила цвет на 1 секунду на зеленый строка снова стала белой через секунду

Да, так и определи это изменение, сравнив со старым, и отдай в компонент класс, который эту анимацию проиграет.

зачем хранить старое значение? костыль какой то надо просто заставить вуй отслеживать изменение всех значений и менять цвет для конкретной строки после того как оно изменилось

А что вью, по-твоему, делает, когда вотчит значение?)

ну вот выше вариант не работает почему то (