vue chart.js has 'RangeError: Maximum call stack size exceeded' when pushing number in the chartData.datasets[0].data

Question

The line 'this.chartData.datasets[0].data.push(30);'
in the function doUpdated() gave the error,
but when I use this line, '// this.chartData.datasets[0].data = [40, 20, 12, 30];'
it works fine.

why can't I use method push()?
I don't think the line gave the error is recursive.

below is the code

<script>
  ...
  data() {
    return {
      chartData: {
        labels: [ 'January', 'February', 'March' ],
        datasets: [ { 
          label: 'data bar',
          data: [40, 20, 12] } ]
      },
      chartOptions: {
        responsive: true
      }
    }
  },
  methods: {
    doUpdated(){
        setTimeout(() => {
          this.chartData.labels.push('April');
          this.chartData.datasets[0].data.push(30);
          // this.chartData.datasets[0].data = [40, 20, 12, 30];
        }, 2000);
    }
  },
  created(){
    this.doUpdated();
  },
}
</script>

error

enter image description here

success view

enter image description here

Answer 1

There is no big difference between typing.Dict and dict.

Just typing.Dict is actually a Generic Type, so it allows you to specify subtypes inside the brackets.

Like:

from typing import Dict
def func_1(arg_one: Dict[str, int]) -> Dict:
    pass

But typing.Dict is only necessary if your Python version is under 3.9. Other wise you could do the same with regular dicts.

Example Python >= 3.9:

def func_1(arg_one: dict[str, int]) -> dict:
    pass