Народ - есть такой код: <li class="candlestick" :key="n" v-for="n in 28"

:class="{ colorLow: isColorHiLow(), colorHi: result }">
<i class="candleShadow" ></i>
<span class="candleBody" :style="{ height: candleBodyCoords() }"></span>
</li>
<!-- <li class="candlestick"> end -->
Обратить внимание на <span class="candleBody">

candleBodyCoords: function () {
function randomInteger (min:number, max:number) {
// получить случайное число от (min-0.5) до (max+0.5)
const rand:number = min - 0.5 + Math.random() * (max - min + 1)
const result = Math.abs(Math.round(rand))
console.log('777')
return result + '%'
}
return randomInteger(1, 100)
}

вопрос:
почему данный метод отрабатывает не 28 раз как это должно быть по замыслу а - 2856?
http://joxi.ru/Q2KglPYhOxzjN2
какие есть идеи или варианты почему это может происходить?

этот это какой? и о каком рендере идет речь? 28 раз это логично - но откуда берется 2800?

о любом ре-рендере компонента при изменении любой реактивной зависимости. "этот" - это метод, вычисляющий вам высоту

<template> <div class="chartContent"> <ul class="candleWrap"> <li class="candlestick" :key="n" v-for="n in 28" :class="{ colorLow: isColorHiLow(), colorHi: result }"> <i class="candleShadow" ></i> <span class="candleBody" :style="{ height: candleBodyCoords() }"></span> </li> <!-- <li class="candlestick"> end --> </ul> <!-- <ul class="candleWrap"> end --> <ul class="volumeWrap"> <li class="volume colorHi"> </li> <!-- <li class="volume"> end --> <li class="volume colorLow"> </li> <!-- <li class="volume"> end --> <li class="volume colorHi"> </li> <!-- <li class="volume"> end --> <li class="volume colorLow"> </li> <!-- <li class="volume"> end --> <li class="volume colorHi"> </li> <!-- <li class="volume"> end --> <li class="volume colorLow"> </li> <!-- <li class="volume"> end --> <li class="volume colorHi"> </li> <!-- <li class="volume"> end --> <li class="volume colorLow"> </li> <!-- <li class="volume"> end --> <li class="volume colorHi"> </li> <!-- <li class="volume"> end --> <li class="volume colorLow"> </li> <!-- <li class="volume"> end --> <li class="volume colorHi"> </li> <!-- <li class="volume"> end --> <li class="volume colorLow"> </li> <!-- <li class="volume"> end --> <li class="volume colorHi"> </li> <!-- <li class="volume"> end --> <li class="volume colorLow"> </li> <!-- <li class="volume"> end --> <li class="volume colorHi"> </li> <!-- <li class="volume"> end --> <li class="volume colorLow"> </li> <!-- <li class="volume"> end --> <li class="volume colorHi"> </li> <!-- <li class="volume"> end --> <li class="volume colorLow"> </li> <!-- <li class="volume"> end --> <li class="volume colorHi"> </li> <!-- <li class="volume"> end --> <li class="volume colorLow"> </li> <!-- <li class="volume"> end --> <li class="volume colorHi"> </li> <!-- <li class="volume"> end --> <li class="volume colorLow"> </li> <!-- <li class="volume"> end --> <li class="volume colorHi"> </li> <!-- <li class="volume"> end --> <li class="volume colorLow"> </li> <!-- <li class="volume"> end --> <li class="volume colorHi"> </li> <!-- <li class="volume"> end --> <li class="volume colorLow"> </li> <!-- <li class="volume"> end --> <li class="volume colorHi"> </li> <!-- <li class="volume"> end --> <li class="volume colorLow"> </li> <!-- <li class="volume"> end --> </ul> <!-- <ul class="volumeWrap"> end --> </div> <!-- <div class="chartContent"> end --> </template> <script lang="ts"> import { defineComponent } from 'vue' export default defineComponent({ name: 'chartContentApp', data (): any { return { result: false } }, methods: { isColorHiLow: function () { const randomValue = Math.round(Math.random()) this.result = !randomValue console.log('isColorHiLow') return randomValue }, candleBodyCoords: function () { function randomInteger (min:number, max:number) { // получить случайное число от (min-0.5) до (max+0.5) const rand:number = min - 0.5 + Math.random() * (max - min + 1) const result = Math.abs(Math.round(rand)) return result + '%' } return randomInteger(1, 100) } } }) </script>

такое ощущение, что ты ожидаешь от вью какого-то императивного пошагового выполнения. То есть, используешь result как временную переменную. на каждой итерации. Но это не так работает

а как тогда во вью реазиловать временную переменную?