Proxy Object duplicate values

Question

There is this code:

const priceWrap = ref(null)
const priceWrapSizes = useElementSize(priceWrap)
const priceWrapHeight = priceWrapSizes.height
const priceElementsQuantity = ref(3)
const priceTestWrapData:any = ref({})

function compositionPriceWrapElements (priceElementsNumber:any) {
  const key = 'anyValue' + priceElementsNumber.toString()
  Object.assign(priceTestWrapData, { [priceElementsNumber]: key })
  priceTestWrapData.value[key] = 'test' + priceElementsNumber.toString()
  console.log(priceElementsNumber)
  console.log(priceTestWrapData.value)
}

watch(priceWrapHeight, (currentValue) => {
  for (let priceElementsNumber = 0; priceElementsNumber < priceElementsQuantity.value; priceElementsNumber++) {
    compositionPriceWrapElements(priceElementsNumber)
  }
  store.commit('gettingPriceWrapHeight', currentValue)
})

When it is worked out in DevTools, everything is displayed correctly

but there are problems with the console:

And the question is about it:
Why is each iterable key-value displayed on it three times in each log?
(And at this time the iterator in the console fulfills the 1st time as it should be.)
Doesn't it have something to do with proxy objects and Vue3 behavior in this context with them?
Is this generally normal behavior?

The console examiner doesn't show objects frozen in time as they were when the log was made, it shows the latest state of the given object when you examine it. For example, try `for (let a = {}, i = 0; i < 5; i++) { a[i] = i; console.log(a); }` and open the logged objects in console, you'll see the same behavior since they're all references to the same object. — Etheryte, Aug 10 '22 at 10:17
Possible duplicate of https://stackoverflow.com/questions/17546953/cant-access-object-property-even-though-it-shows-up-in-a-console-log?rq=1 — Estus Flask, Aug 10 '22 at 10:18

Proxy Object duplicate values

0 Answers0