CODEWITHSUNDEEP
javascriptvuejs3
May W.
May W.

Reputation: 327

Why is this cause RangeError: Maximum call stack size exceeded?

Why is this cause RangeError: Maximum call stack size exceeded?

const myData = ref({
  labels: [] as string[],
  datasets: [
    {
      data: [] as number[]
    }
  ]
});


const handleCurrency = (origin) => {
  origin.forEach(item => {
    myData.value.labels.push(item.item); // labels: ['USD'] is ok.
    myData.value.datasets[0].data.push(item.percent); // this line cause error
  });
};

handleCurrency([{item: 'USD', percent: 1, value: 50}]);

in my expect, number 1 will put on myData.datasets[0].data => [1].

Upvotes: 1

Views: 691

Answers (1)

Tolbxela
Tolbxela

Reputation: 5181

I don't get any errors with your code. The problem is somewhere else.

Check the playground.

const { ref, createApp } = Vue;

const myData = ref({
  labels: [],
  datasets: [
    {
      data: []
    }
  ]
});


const handleCurrency = (origin) => {
  origin.forEach(item => {
    myData.value.labels.push(item.item); // labels: ['USD'] is ok.
    myData.value.datasets[0].data.push(item.percent); // this line cause error
  });
};

const app = createApp({
  productionTip: false,
  data() {
    return {
      myData: myData
    }
  },
  methods: {
   click() {
     handleCurrency([{item: 'USD', percent: 1, value: 50}]);  
   }
  }
});

app.mount('#app')
<div id="app">
   <button @click="click()">handleCurrency</button>
   <pre>{{myData}}</pre>
   
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>

Upvotes: 0

Related Questions