how can i do a call to axios wtihout fall in a infinite loop

Question

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 im 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

TEMPLATE

   <template>
  <div class="card p-4 col-2 text-center text-white bg-black">
    <img
      v-show="filmData.poster_path != null"
      :src="'http://image.tmdb.org/t/p/w342/' + filmData.poster_path"
      :alt="filmData.title"
    />
    <h3>{{ filmData.title }}</h3>
    <h5
      v-show="
        filmData.title.toLowerCase() != filmData.original_title.toLowerCase()
      "
    >
      {{ filmData.original_title }}
    </h5>
    <lang-flag
      class="flag"
      :iso="filmData.original_language"
      :squared="false"
    />
    <h4>{{ filmData.vote_average }}</h4>
    <div>
      <div class="star" v-for="element in fullArrayStars()" :key="element">
        &starf;
      </div>
      <div
        class="actor"
        v-for="element in ricercaAttori /*()*/"
        :key="element.name"
      >
        {{ element.name }}
      </div>
    </div>
  </div>
</template>

<script>
import LangFlag from "vue-lang-code-flags";
import axios from "axios";

export default {
  name: "CardBool",
  data() {
    return {
      starf: "star",
      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) => {
          this.arrayAttori = response.data.cast;
        });
      this.arrayAttori.length = 5;
      console.log(this.arrayAttori);
      return this.arrayAttori;
    },
  },
};
</script>
i m working in VUE CLI...

thanks to everyone

Answer 1

methods: {
    fullArrayStars() {
      return this.stars;
    },
    changeVisibilita() {
      if (this.visibilita == false) {
        this.visibilita = true;
      } else {
        this.visibilita = false;
      }
    },
  },
  created() {
    axios
      .get(
        `https://api.themoviedb.org/3/movie/${this.filmData.id}/credits?api_key=9631e84004e35c8371fcb3c009af9551`
      )
      .then((response) => {
        this.arrayAttori = response.data.cast;
      })
      .then(() => {
        this.arrayAttori.splice(5, this.arrayAttori.length);
      });
    return this.arrayAttori;
  },

this is the solution... you have to use created() so you can do the call to the API before the creation of the Card, and you have to use then two times... one time to create the array and the second time to work in that array, in this case to splice it