时间戳

首页 > 解决方案 > vue js中的方法无限运行

vue.js - vue js中的方法无限运行

问题描述

我有一个在 vue js 模板中调用的方法。但是，当我运行网站时，这个方法被无限调用

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

我希望给出用户的 id，然后该方法应该获取一个 ID 将其发送到 laravel 控制器，根据 DB 中的条目计算评分并返回结果。

标签： vue.jsvuejs2

解决方案

因此，您要做的是从模板循环中删除任何会生成 api 调用的内容。发生的情况是，每次数据更改时，您都会重新渲染模板，并且由于您的模板中有一个 api 调用，因此每次渲染您请求新数据时，这就是您获得无限循环的原因。

您应该将从 api 获得的数据存储在一个变量中，并从循环外部启动 API 调用。

<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();
}

这可以通过在获取所有行之前不渲染任何内容来进一步改进。您可以通过在数据中定义另一个变量来做到这一点，该变量在 getAll 期间填充，并在每次 api 获得响应时更新。但理想情况下，您可以一次调用所有评论的 API，而不是一次调用一个。

推荐阅读