title: how can i do a call to axios wtihout fall in a infinite loop
body: <p>i did a netflix copy with two different Axios call for series and films... Now i want add an Axios call for actors... and i did it... but i fall in an infinite loop, so after one minute the page crash... do you know why???
  This is a CardFilm.vue that is repeated with a v-for in MainFilm.vue...
  In my card i ve got all Film info from film's API... i want add a section for actors, so i m taking another API for actors... i had back 20 objects where i take just the element.name (actor name), with this.arrayAttori.length i take just the first 5 element of the array ACTORS of API, but after that it work i fall in an infinite loop, because my code ask infinite time the ACTORS ARRAY of API</p>
  <p>TEMPLATE</p>
  <pre><code>   &lt;template&gt;
    &lt;div class=&quot;card p-4 col-2 text-center text-white bg-black&quot;&gt;
      &lt;img
        v-show=&quot;filmData.poster_path != null&quot;
        :src=&quot;'http://image.tmdb.org/t/p/w342/' + filmData.poster_path&quot;
        :alt=&quot;filmData.title&quot;
      /&gt;
      &lt;h3&gt;{{ filmData.title }}&lt;/h3&gt;
      &lt;h5
        v-show=&quot;
          filmData.title.toLowerCase() != filmData.original_title.toLowerCase()
        &quot;
      &gt;
        {{ filmData.original_title }}
      &lt;/h5&gt;
      &lt;lang-flag
        class=&quot;flag&quot;
        :iso=&quot;filmData.original_language&quot;
        :squared=&quot;false&quot;
      /&gt;
      &lt;h4&gt;{{ filmData.vote_average }}&lt;/h4&gt;
      &lt;div&gt;
        &lt;div class=&quot;star&quot; v-for=&quot;element in fullArrayStars()&quot; :key=&quot;element&quot;&gt;
          &amp;starf;
        &lt;/div&gt;
        &lt;div
          class=&quot;actor&quot;
          v-for=&quot;element in ricercaAttori /*()*/&quot;
          :key=&quot;element.name&quot;
        &gt;
          {{ element.name }}
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import LangFlag from &quot;vue-lang-code-flags&quot;;
  import axios from &quot;axios&quot;;
  
  export default {
    name: &quot;CardBool&quot;,
    data() {
      return {
        starf: &quot;star&quot;,
        arrayStars: [],
        stars: Math.floor(this.filmData.vote_average / 2),
        arrayAttori: null,
      };
    },
    components: {
      LangFlag,
    },
    props: {
      filmData: Object,
    },
    methods: {
      fullArrayStars() {
        return this.stars;
      },
      ricercaAttori() {
        axios
          .get(
            `https://api.themoviedb.org/3/movie/${this.filmData.id}/credits?api_key=9631e84004e35c8371fcb3c009af9551`
          )
          .then((response) =&gt; {
            this.arrayAttori = response.data.cast;
          });
        this.arrayAttori.length = 5;
        console.log(this.arrayAttori);
        return this.arrayAttori;
      },
    },
  };
  &lt;/script&gt;
  i m working in VUE CLI...
  </code></pre>
  <p>thanks to everyone</p>