Method in vue js runs infinitely

Question

I have a method that is called in vue js template. However, when I run the web site, this method is called infinitely

<template>
    <div class="strip_list wow fadeIn" v-for="(row, index) in model.data">
     <i class="icon_star voted" v-for="(val, index) in getOverallRating(row.id)"> 
     </i>
    </div>
</template>



<script>
methods: {

    getOverallRating(id)
    {
     axios.get(`${this.apiReview}?id=${id}`).then(response => 
      {
        this.overall = response.data
      })
        return this.overall
    }
}
</script>

I expect to give an id of the user, then the method should get an ID send it to the laravel controller, get calculate the rating according the entries in DB and return the result.

That is not how you use async code. See: https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call — str, Aug 13 '19 at 12:05

score 2 · Answer 1 · answered Aug 13 '19 at 14:29

So, what you want to do is remove anything that would generate an api call out of your templates loop. What happens is, that every time the data changes, you re-render the template, and since you have an api call in your template, every time you render you request new data, that's why you're getting an infinite loop.

You should store the data you get from the api in a variable, and initiate API calls from outside of the loop.

<template>
  <div class="strip_list wow fadeIn" v-for="(row, index) in model.data">
    <i class="icon_star voted" v-for="(val, index) in overall(row.id)"> 
      {{val}}
    </i>
  </div>
</template>

data: () => {
  overall: {}
},
methods: {
  getAll() {
    // loop through all rows and make api request
    this.model.data.forEach(r => this.getOverallRating(r.id))
  }
  getOverallRating(id) {
    // make api request
    axios
      .get(`${this.apiReview}?id=${id}`)
      .then(response => {
        // and save into overall, where the id is the key
        this.overall[id] = response.data
      })
  },
},
created(){
  // initialize loading during create
  this.getAll();
}

This can be further improved by not rendering anything 'till all rows are fetched. You could do that by defining another variable in data, that gets populated during getAll, and updated every time the api gets a response. But Ideally you'd be able to call the API for all reviews at once, not one at a time.

Method in vue js runs infinitely

1 Answers1