A
A
Andrey Shulepin2019-02-07 04:22:00
Vue.js
Andrey Shulepin, 2019-02-07 04:22:00

How to trick Vue's reactivity?

there are two large arrays (one of the order of 4-5 thousand objects, the second may be less).
The component builds a table with data. The first cells array contains exactly the objects that describe the appearance of the cells.
The second array contains data objects {cell_id:"sadasd asd asd a", value:"some text or number"}.
To draw rows and columns, I made a computed property (a multidimensional array based on the first cells array).
With the first array, everything is more or less normal, a table is built based on it and normally rendered.
The problem is with the second values ​​array, it contains the data that needs to be inserted into the appropriate cells.
Firstly, the data is obtained by a separate request and they need to be scattered over the corresponding cells, and they can also be changed in the process (by separate requests from the server).
It should be noted here that the cell is a component and array elements are passed to it as :cell and :value.
And if the cell gets there through for iterations over the rows and columns of a computed multidimensional array, then I tried a bunch of ways to pass value to the cell. all of them are either inhibitory or do not cause reactivity and do not redraw the cell.
Roughly, all methods can be divided into those that use the reactivity of the values ​​array, or the cells are requested through a method, which causes a bunch of unnecessary method calls.
Suggest solutions to this problem. Ideas and options ran out after two weeks.

Answer the question

In order to leave comments, you need to log in

5 answer(s)
A
Artem, 2019-02-07
@LisPNZ

Install Vuex.
Store the data for display as an object:
values: {
1: value,
2: value
}
pass the keys of this object to the cell component, and inside the component, pull from vuex through the computed property.

I
in some, 2019-02-09
@iGanza

Try lazy render, virtual scroll as an example of lazy rendering

A
Alexander Drozdov, 2019-02-07
@bagzon

I hope not all 4-5k lines are sent to the client?
In fact, use VUEX, all mutations (data changes) are carried out through the view, and also receive data through the view.
And everything will be fine) The main thing is to do everything in small portions, well, at least 100 elements per page, so that the client does not slow down.

Y
yaBliznyk, 2019-02-08
@yaBliznyk

Make pagination and a separate display array where the slice of the current page of elements will be. Make the data array non-reactive.

M
Maksim B, 2019-02-08
@Sundagy

handson table

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question