1

I'm kinda new to Vue3 and encountered such problem in one project. Below are my pseudo code blocks:

nested variable declaration:

const testData = ref([
    {
      type: '',
      title: '',
      data: {
        labels: [] as string[],
        datasets: [
          {
            type: '',
            label: '',
            data: [] as number[],
          },
        ],
      },
    },
  ])

and here is where the error thrown

 GetData().then(response=>{
    if(response != undefined){
            response.result.forEach(value=>{
              testData.value[0].data.datasets[0].data.push(value)//this line throws out the error 
            })
    }
         ...  
 }).catch(err=>console.log(err))

and the error message lies below:

RangeError: Maximum call stack size exceeded
at Array.value (helpers.segment.js:1550:26)
at Array.instrumentations.<computed> (reactivity.esm-bundler.js:398:42)
at Array.value (helpers.segment.js:1550:26)
at Array.instrumentations.<computed> (reactivity.esm-bundler.js:398:42)
at Array.value (helpers.segment.js:1550:26)
at Array.instrumentations.<computed> (reactivity.esm-bundler.js:398:42)
at Array.value (helpers.segment.js:1550:26)
at Array.instrumentations.<computed> (reactivity.esm-bundler.js:398:42)
at Array.value (helpers.segment.js:1550:26)
at Array.instrumentations.<computed> (reactivity.esm-bundler.js:398:42)

According to other online articles, they all said this error happens because the loop, but here the foreach loop only has to loop less than 15 times, and once I changed the testData into a plain array without using ref(), everything just worked fine and the final result got rendered as what I was expecting. Can somebody just tell me the reason?

Improve this question
6
  • 1
    It could happen because somewhere in your code a change to a ref trigger a change to another ref, which loops back to change the first ref.. Basically, you have an infinite loop somewhere. Commented Feb 4, 2022 at 17:36
  • thanks for your reply, here the testData is pretty self-contained, it has no interaction with other ref()s, I juts intended to fill it with data grabbed from backend and pass it to the childcompoent to get it rendered on charts. Commented Feb 4, 2022 at 17:47
  • 1
    I don't see how that code can crash, you made the root variable reactive with a ref(..), but not the whole object, and pushing inside the object won't trigger reactivity. If you want the whole object to be reactive, you can use reactive(..) instead. My guess is the issue is somewhere else from what you're showing us. Commented Feb 4, 2022 at 18:01
  • Please, provide stackoverflow.com/help/mcve that can reproduce the problem. It could at least be improved with .push(...response.result) Commented Feb 4, 2022 at 18:27
  • 1
    @Guillaume F. thanks for your insight! that page I was working on is pretty clean, but when I looked into one nested child component, there's one computed property doing mapping on that data I was passing through to it Commented Feb 4, 2022 at 21:14
Related questions
2
Vuejs call $refs
2
Unable to create ref dynamically in Vue.js
0
Vue `$refs` issues
Load 7 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.