Answer the question
In order to leave comments, you need to log in
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
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 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.
Make pagination and a separate display array where the slice of the current page of elements will be. Make the data array non-reactive.
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question