Posted 1 May 2024, 9:59 am EST
Hi,
I’m using Vue2 (due to an old application) with the SpreadJS sheet component. My scenario is the following:
- I am loading a bunch of data from an API
- I want to filter, sort, edit that data
- I want to submit only the changes to my API
My approach was great to begin with, I have my data array, which contains the original data I fetched. I am mapping that into a list of Proxy objects which handle the get/set, and when changes are made, they are instead applied to a nested changes object instead of the original target object. The getter effectively does some sort of COALESCE between the changes and the original data.
This approach worked great - until I sorted. Apparently sorting, instead of changing some internal data structure, literally rewrites all of the objects, so writes all attributes from line 5 into line 1 (if this is what the sorting results in).
Is there any way I can avoid this weird behavior of my source data structure being manipulated to eternity and beyond, or is this just how the component works and I need to find workarounds?
Here’s my proxy approach, which is my data source to the sheet in the end again, maybe you find something faulty with that:
convertObjectsWithProxy() {
this.sheetData = this.rawData.map(o => {
o.isOriginal = function(prop) {
if (!this.changes) return true;
if (this.changes && this.changes.hasOwnProperty(prop) && this.changes[prop] !== this[prop])
return false;
return true;
}.bind(o);
// return o;
return new Proxy(o, {
get(target, prop) {
if (!target.changes || !target.changes.hasOwnProperty(prop)) return Reflect.get(...arguments);
return target.changes[prop];
},
set(target, prop, value) {
if (!o.changes) o.changes = { [prop]: value };
else o.changes[prop] = value;
return true;
}
});
});
}Highly appreciate your input, thanks!
Kind regards,
David
