Seien Sie möglicherweise vorsichtig bei möglichen Endlosaktualisierungsschleifen in den Renderfunktionen von Vue-Komponenten während der Iteration

Question

Ich habe ein Array mit 4 Objekten und rendere es wie folgt: {{item.__data__.nombre_monitor_tipo+':'+item.__data__.cantidad_objetivos}}, wenn ich es dann beim Füllen versuche ein weiteres Array mit Daten wie diesem

P粉165522886 · Answer

<pre class="brush:html;toolbar:false;"><template>
  <div v-for="(item,index) in cant_objetivos_tipo" :key="index">
        {{ item.__data__.nombre_monitor_tipo + ' : ' + item.__data__.cantidad_objetivos }}
  </div></template>

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>
</pre>