avoid to calc same data twice

[Rakasch]

I have a table with appointments, the appointments in a td currently look like this:

eventRowsStyle() is a function that calls eventRows() and generates a css style from it.

So eventRows() is currently calculated twice in this td.
Since I call the function frequently in a large table and it contains nested loops, I would prefer to call it only once per td.

In plain js, you would calculate eventRows() once, store the result in a variable, and pass the variable to both functions.
In the view template, this is not possible.

Is there a clean way to solve this?

---

I came up with a hacky workaround: Introduce a dummy loop, so we have access to the variable.


Better ideas ?

[fiedsch]

Just an idea: maybe you could make a new computed (eactive) property eventRows and access this instead of your eventRows(). This way Vue would take care of not computing it twice.

[Rakasch]

Thanks for your suggestion.
I cannot use a computed property since I need a param to calc the eventRows for the current cell.
Basically they are calculated based on the current row and column of the table.

I could create a computed that returns a massive nested array for all cells.
[rowId => colId => eventRowsArray, ...]
But then I have an even worse calculation: If I update any of the cells data, it would recalc the whole computed data array for all cells.