You may have an infinite update loop in a component render function in vue for iteration

Question

I have an array with 4 objects, which I render as follows

<div v-for="item in cant_objetivos_tipo">
        {{ item.__data__.nombre_monitor_tipo + ' : ' + item.__data__.cantidad_objetivos }}
</div>

then when i try fill another array with the data as follows

<div v-for="item in cant_objetivos_tipo">
        {{ datapie.push(item.__data__.nombre_monitor_tipo + ' : ' + item.__data__.cantidad_objetivos) }}
</div

i get infinite loop error

datapie[] is declared before

<script>
    import axios from 'axios'
    
    export default {
        data() {
            return {
                cant_objetivos_tipo: [],
                datapie: [],
          }
        },...

I hope you can help me, thank you very much in advance

Answer 1

<template>
  <div v-for="(item,index) in cant_objetivos_tipo" :key="index">
        {{ item.__data__.nombre_monitor_tipo + ' : ' + item.__data__.cantidad_objetivos }}
  </div
</template>

<script>
import axios from 'axios';

export default
{
  name: 'MyCustomComponent',
  data() 
  {
    return {
      cant_objetivos_tipo: [],
    };
  },
  computed:
  {
    datapie()
    {
      return this.cant_objetivos_tip.map(item => item.__data__.nombre_monitor_tipo + ' : ' + item.__data__.cantidad_objetivos);
    }
  },
  created()
  {
    this.fetchData();
  }
  methods:
  {
    fetchData()
    {
      axios.get('/api/get_tipo_objectivos').then(response =>
      {
        this.cant_objetivos_tipo = response || [];
      });
    }
  }
}
</script>