首页 > 解决方案 > Nuxt Js 在每次迭代时设置值 v-for

问题描述

我有这段代码,我想找出一种getPickedTeam每次迭代都调用一次的方法,我知道我不能每次都将它设置为数据属性,因为它会创建一个无限的重新渲染循环。

我想设置 PickedTeam 的原因是因为我需要在同一次迭代中至少调用它 5 次,所以如果我为 40 条记录找到团队 5 次,它会非常慢。

        <span :key="match.id" v-if="matchViewable(match)" class="center-item">
          {{ getPickedTeam(record.resultMatches, match).pickedTeam }}
          <span v-if="match.mondayNight">
            &nbsp;<b>{{ getPickedTeam(record.resultMatches, match).pickedTeam }}</b>
          </span>
          //i'd like to call getPickedTeam here about 3 more times but it will become slow
        </span>

在我的方法中,我有这个

getPickedTeam(picks, match) {
      const team = picks.filter(function(pick) {
        return pick.match.id == match.id;
      })[0];
      if (team) {
        return team;
      }
    }

也许有一种方法可以使用 vuex 商店设置 getPickedTeam 但我是菜鸟,我不知道如何:(

标签: vue.jsantdnuxt.js

解决方案


推荐阅读