Are nested elements allowed in pinia

[david8z]

Hi I am not sure if this is a bug or if it is intentionally working like that.

Let say I have the following object:

items: [
  {
    colors: [
        { value: true}
     ]
  },
  {
    colors: [
        {value: true}
     ]
  }
]

When i change lets say items[0].colors[0].value = false automatically items[1].colors[0].value is also changed to false, is this an expected behaviour?

localhost_3000_undefined_custom-ilustrations.-.27.February.2022.mp4

They look kind of linked as if I delte one of the with the devtools both are deleted

[soc221b]

It seems due to your items[1].colors[0] and items[2].colors[0] share the same object.

Maybe you forgot to deeply clone it?

For example, assuming you have an addItem function like this:

const initialColors = [{ active: true, hex: "000000", id: 0 }]
function addItem () {
  const newItem = {
    colors: [...initialColors], // forgot to deeply clone here
    colors: JSON.parse(JSON.stringify(initialColors)), // ok

    // ...
  }
  state.items.push(newItem)
}

---

Further reading: Immerjs is a library to help us solve this kind of problem in a elegant way.

[david8z]

Oh that is totally it many thanks 👍

[sbay-ppm]

Forgetting to deeply clone was my issue as well. Thank you both!