如何在两个具有v-for的数组上使用嵌套的for循环？

Question

这个问题已经解决，我的父视图和子组件代码现在使用Vue.js正确并正常工作，我试图迭代类似于嵌套的for循环来呈现矩阵表显示。为了实现这一点，我尝试使用一个嵌套的v循环，但无法使它最初工作。

我用来构建表的数据以日期调度的形式存在，每个日期都来自MongoDB中的一个调度集合。每一天，所有的球队都与另一支球队比赛。每个团队的匹配数据位于每个文档中的调度数组中。

为了简化该方法并完成此任务，我在父视图中创建了一个包含所有团队计划的调度表，并将其作为属性传递给子组件，以简化v-for编码。

我试图在子组件中执行的传统模式在逻辑上是：

for(const i=0; i<schedules.length; i++) {
for(const j=0; j<weeks.length; j++) {
  console.log("This match is " + schedule[i] + " on " + week[j]) 

在子组件上，我尝试了以下两种策略，但都没有效果：

1.)在div中包装v-for：

<div v-for="(schedule,j) in schedules" :key="j">
        <sui-table-cell v-for="(number, i) in weeks" :key="i">
        {{schedules[schedule][i].team}}
        </sui-table-cell>
</div>      

2.)在模板中包装v-for (此代码不编译)：

<template v-for="schedule in schedules">
        <sui-table-cell v-for="(number, i) in weeks" :key="i">
        {{schedules[schedule][i].team}}
        </sui-table-cell>
</template>    

数据应该是这样的(如果单击图像，可以看到我无法迭代的地方)：

正确看待数据

父视图模板。

<template>
  <div>
    <h1 class="ui header center aligned">ACL</h1>
    <h4 class="ui header center aligned schedule">
      <em>CRIBBAGE SCHEDULE</em>
    </h4>
    <sui-table id="standings" class="celled table center aligned">
      <inner-table :weeks="totalWeeks" :allPlayers="allPlayers" />
    </sui-table>
  </div>
</template>
<script>
import TableForm from "./TableForm.vue";
import { api } from "../../../helpers/helpers.js";
export default {
  name: "schedule-header",
  components: { "inner-table": TableForm },
  data() {
    return {
      totalWeeks: [],
      allDates: [],
      allPlayers: []
    };
  },
  async mounted() {
    this.totalWeeks = await api.getTotalWeeks();
    this.allDates = await api.getAllDates();
    this.allPlayers = await api.getTeams();
  }
};
</script>
<style scoped>
h4.schedule {
  color: brown;
}
</style>

儿童部分：

<template>
  <div>
    <sui-table-header>
      <sui-table-row>
        <sui-table-header-cell></sui-table-header-cell>
        <sui-table-header-cell>TEAMS</sui-table-header-cell>
        <sui-table-header-cell v-for="(number, i) in weeks" :key="i">WK{{i+1}}</sui-table-header-cell>
      </sui-table-row>
      <sui-table-row>
        <sui-table-cell></sui-table-cell>
        <sui-table-cell></sui-table-cell>
        <sui-table-cell v-for="(number, i) in weeks" :key="i">{{ number.gameDate.substring(0,10) }}</sui-table-cell>
      </sui-table-row>
    </sui-table-header>
    <sui-table-row v-for="(player, i) in allPlayers" :key="i">
      <sui-table-cell>{{i+1}}</sui-table-cell>
      <sui-table-cell>{{ player.player1 }}&{{player.player2}}</sui-table-cell>
      <sui-table-cell v-for="(week, j) in weeks" :key="j">{{player.schedule[j]}}</sui-table-cell>
    </sui-table-row>
  </div>
</template>

<script>
export default {
  props: ["weeks", "allPlayers"]
};
</script>

Answer 1

Vue使用键属性在组件之间进行区别，并防止不必要的呈现。因此，从您的代码:key="i"中，Vue理解所有带键i的sui-table-cell都是相同的。所以你才会重复。您应该提供唯一的键来避免这种情况。

但是，我不建议使用索引作为键，并提供一些更好的键控策略。

<sui-table-row v-for="(player, i) in allPlayers" :key="i">
      <sui-table-cell>{{i+1}}</sui-table-cell>
      <sui-table-cell>{{ player.player1 }}&{{player.player2}}</sui-table-cell>
      <div v-for="(schedule,j) in schedules" :key="j">
        <sui-table-cell v-for="(number, i) in weeks" :key="`${j}_${i}`">
          {{schedules[j][i]}}
        </sui-table-cell>
      </div>
</sui-table-row>

样本数据：

{
    schedules: [[1, 2, 3, 4, 5, 6, 7, 8, 9, 10],[2,3,4,5,6,7,8,9,1]]
    weeks: [1/1,1/7,1/14,1/21,1/28,2/5,2/12,2/19,2/25,3/3]
}

使用模板的解决方案将不起作用，因为template部件从未呈现，因此当您想要使用v-for时，它将用于多个内部元素，如：

<template v-for="...">
 <h1></h1>
 <p></p>
</template>