The issue has been resolved, and both my parent view and child component code are now correct and functioning properly I am using Vue.js with the goal of iterating similarly to a nested for loop to display a matrix table. Initially, I tried to achieve this by using a nested v-for loop but encountered difficulties in making it work.
The data used to construct the table consists of dates forming a schedule, each retrieved from a schedule collection in MongoDB. Each day, all teams have a match against another team, and the match data for each team is stored in a schedule array within each document.
To simplify the process and accomplish this task, I created a schedule table containing all team schedules in the parent view, which I passed as a property to the child component to streamline the v-for coding.
The logic for what I'm aiming to do in the child component follows a traditional pattern:
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])
I attempted two strategies in the child component without success:
1.) Wrapping a v-for inside a div:
<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.) Wrapping a v-for inside a template (this code does not compile):
<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>
The expected data should resemble the image below (click on the link to see where I encounter issues with iteration):
Parent view 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>
Child Component:
<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>