1

I am in Vue.js and trying to correct inappropriate quantity input value like "12jd". They belong to item objects which are in a array literal called store (which is defined in data( ) return). The problematic code is in the input event handler function which gets the item's index - idx in which the bad quantity was written.

Everything goes well until I try to assign the proper array, with no bad quantity, to the original store in the this context. This part does not work, no value gets changed in the original.

failed(idx) {

  const storeCopy = lodash.cloneDeep(this.store); //deep copy the store literal

  const unmodified = storeCopy.filter((item) => item.id !== idx);

  const modified = storeCopy.filter((item) => item.id === idx)[0]; //slice out the relevant part
  const modifiedCopy = JSON.parse(JSON.stringify(modified)); //deep copy the item object

  const input = parseInt((" " + modifiedCopy.quantity).slice(1)); //get parsed input from deep copied string

  const store = [
    Object.defineProperty(modifiedCopy, "quantity", {
      value: isNaN(input) ? 0 : input,
    }),
    ...unmodified,
  ]; //correct the input and put it back to the array
  console.log(store);

  this.store.length = 0; //from this it's messed up
  this.store = store;
}

I do deep copy even three times, still the problem backpropagates to console logged array after uncommenting the last two lines. Without them it's fine.

Why does the reference not get garbage collected, after setting this.store.length to 0, or this.store to [] at all? What do I miss out, is there any original reference left in the new array maybe? Any help appreciated! Thanks

Edited

Here's the output without then with the two last line:

Without the last two lines

I don't even understand who it's possible that store in the local scope is affected backwards, by inserting those two lines. Anyways It gets restored somehow to the bad value "12jd".

With the two lines

Even the log looks different, I have to click on the three dots to reveal the values.

Dániel Mákos
  • 19
  • 4
  • You didn't need to clone the array several times, one time is enough. The code is unnecessarily convoluted but the question lacks clear problem statement. Please, don't describe the output but post it. "from this it's messed up" - how? "eference not get garbage collected" - what does it have to do with GC and how did you determine it? – Estus Flask May 10 '22 at 11:46
  • @EstusFlask I have added outputs, tell me if you need anything else – Dániel Mákos May 10 '22 at 17:18
  • See https://stackoverflow.com/questions/11284663/console-log-shows-the-changed-value-of-a-variable-before-the-value-actually-ch . When you assign it to this.store , any other subsequent modifications are revealed in console. "store in the local scope is affected backwards" - it's not local anymore. – Estus Flask May 11 '22 at 01:12
  • Thanks for the tip, this made clear what was really displayed on the console. Changed my last line to: this.store = lodash.cloneDeep(store); but this still hasn't solved my initial problem that default value somehow stays around, moreover cannot be overwritten with local store. – Dániel Mákos May 11 '22 at 07:06
  • It doesn't stay around, exactly because you cloned it. it's modified after expected `failed` call, that's the only way I see it behaving this way. Debug all places where quantity could be modified – Estus Flask May 11 '22 at 07:58

0 Answers0