Game marker in a data table - vue and vuetify - vue.js

Question

I have two objects with arrays where one assembles the headers of the data table and another where it brings the status information, managing to obtain the games of the teams of these objects in vue but in all cases I have failed
new Vue({
el: '#app',
data: {
headers: {
"1": { "7": [9, 21, 44, 45, 7], "9": [21, 44, 7, 45, 9], "21": [44, 45, 7, 9, 21], "44": [7, 45, 9, 21, 44], "45": [7, 9, 21, 44, 45], "JJ": true, "JG": true, "JP": true, "SF": true, "EQUIPO": true, "SC": true, "PF": true, "PC": true, "Pnts": true, "Sets": true, "Lugar": true },
"2": { "13": [17, 18, 20, 46, 13], "17": [20, 46, 13, 18, 17], "18": [17, 20, 13, 46, 18], "20": [13, 46, 17, 18, 20], "46": [13, 18, 17, 20, 46], "JJ": true, "JG": true, "JP": true, "SF": true, "EQUIPO": true, "SC": true, "PF": true, "PC": true, "Pnts": true, "Sets": true, "Lugar": true },
"3": { "8": [31, 40, 42, 49, 8], "31": [40, 49, 8, 42, 31], "40": [42, 49, 8, 31, 40], "42": [8, 31, 40, 49, 42], "49": [8, 42, 31, 40, 49], "JJ": true, "JG": true, "JP": true, "SF": true, "EQUIPO": true, "SC": true, "PF": true, "PC": true, "Pnts": true, "Sets": true, "Lugar": true }
},
games: {
"1": [{
"7": { "set2_1": 2, "set1_1": 25, "set2_2": 19, "set1_2": 25, "set2_3": 0, "set1_3": 0 },
"9": [],
"21": { "set1_1": 25, "set2_1": 17, "set1_2": 25, "set2_2": 15, "set1_3": 0, "set2_3": 0 },
"44": { "set1_1": 25, "set2_1": 2, "set1_2": 25, "set2_2": 19, "set1_3": 0, "set2_3": 0 },
"45": { "set2_1": 2, "set1_1": 25, "set2_2": 19, "set1_2": 25, "set2_3": 0, "set1_3": 0 },
"team_id": 9,
"g": 1,
"team": { "name": "Equipo 9", "id": 9, "game_id": 0 },
"favor": 100,
"contra": 75
},
{
"7": [],
"9": { "set1_1": 22, "set2_1": 25, "set1_2": 18, "set2_2": 25, "set1_3": 0, "set2_3": 0 },
"21": { "set1_1": 25, "set2_1": 15, "set1_2": 25, "set2_2": 14, "set1_3": 0, "set2_3": 0 },
"44": { "set2_1": 15, "set1_1": 25, "set2_2": 14, "set1_2": 25, "set2_3": 0, "set1_3": 0 },
"45": { "set2_1": 15, "set1_1": 25, "set2_2": 14, "set1_2": 25, "set2_3": 0, "set1_3": 0 },
"team_id": 7,
"g": 1,
"team": { "name": "Equipo 7", "id": 7, "game_id": 0 },
"favor": 85,
"contra": 92
},
{
"7": { "set2_1": 15, "set1_1": 25, "set2_2": 14, "set1_2": 25, "set2_3": 0, "set1_3": 0 },
"9": { "set2_1": 15, "set1_1": 25, "set2_2": 14, "set1_2": 25, "set2_3": 0, "set1_3": 0 },
"21": [],
"44": { "set1_1": 22, "set2_1": 25, "set1_2": 19, "set2_2": 25, "set1_3": 0, "set2_3": 0 },
"45": { "set1_1": 25, "set2_1": 15, "set1_2": 25, "set2_2": 14, "set1_3": 0, "set2_3": 0 },
"team_id": 21,
"g": 1,
"team": { "name": "Equipo 21", "id": 21, "game_id": 0 },
"favor": 61,
"contra": 100
},
{
"7": { "set1_1": 25, "set2_1": 15, "set1_2": 25, "set2_2": 20, "set1_3": 0, "set2_3": 0 },
"9": { "set1_1": 20, "set2_1": 25, "set1_2": 15, "set2_2": 25, "set1_3": 0, "set2_3": 0 },
"21": { "set2_1": 25, "set1_1": 20, "set2_2": 25, "set1_2": 15, "set2_3": 0, "set1_3": 0 },
"44": { "set2_1": 25, "set1_1": 20, "set2_2": 25, "set1_2": 15, "set2_3": 0, "set1_3": 0 },
"team_id": 45,
"g": 1,
"team": { "name": "Equipo 45", "id": 45, "game_id": 0 },
"favor": 79,
"contra": 90
},
{
"7": { "set1_1": 20, "set2_1": 25, "set1_2": 22, "set2_2": 25, "set1_3": 0, "set2_3": 0 },
"9": { "set2_1": 25, "set1_1": 22, "set2_2": 25, "set1_2": 18, "set2_3": 0, "set1_3": 0 },
"21": { "set2_1": 25, "set1_1": 22, "set2_2": 25, "set1_2": 18, "set2_3": 0, "set1_3": 0 },
"44": [],
"45": { "set1_1": 22, "set2_1": 25, "set1_2": 18, "set2_2": 25, "set1_3": 0, "set2_3": 0 },
"team_id": 44,
"g": 1,
"team": { "name": "Equipo 44", "id": 44, "game_id": 0 },
"favor": 71,
"contra": 91
}
],
"2": [
{
"13": { "set1_1": 25, "set2_1": 17, "set1_2": 25, "set2_2": 15, "set1_3": 0, "set2_3": 0 },
"17": { "set2_1": 0, "set1_1": 0, "set2_2": 0, "set1_2": 0, "set2_3": 0, "set1_3": 0 },
"18": { "set1_1": 0, "set2_1": 0, "set1_2": 0, "set2_2": 0, "set1_3": 0, "set2_3": 0 },
"20": { "set2_1": 0, "set1_1": 0, "set2_2": 0, "set1_2": 0, "set2_3": 0, "set1_3": 0 },
"team_id": 46,
"g": 2,
"team": { "name": "Equipo 46", "id": 46, "game_id": 0 },
"favor": 0,
"contra": 0
},
{
"13": { "set2_1": 25, "set1_1": 20, "set2_2": 25, "set1_2": 22, "set2_3": 0, "set1_3": 0 },
"17": { "set1_1": 0, "set2_1": 0, "set1_2": 0, "set2_2": 0, "set1_3": 0, "set2_3": 0 },
"18": [],
"20": { "set1_1": 20, "set2_1": 25, "set1_2": 22, "set2_2": 25, "set1_3": 0, "set2_3": 0 },
"46": { "set2_1": 25, "set1_1": 20, "set2_2": 25, "set1_2": 22, "set2_3": 0, "set1_3": 0 },
"team_id": 18,
"g": 2,
"team": { "name": "Equipo 18", "id": 18, "game_id": 0 },
"favor": 0,
"contra": 0
},
{
"13": [],
"17": { "set1_1": 0, "set2_1": 0, "set1_2": 0, "set2_2": 0, "set1_3": 0, "set2_3": 0 },
"18": { "set1_1": 0, "set2_1": 0, "set1_2": 0, "set2_2": 0, "set1_3": 0, "set2_3": 0 },
"20": { "set2_1": 0, "set1_1": 0, "set2_2": 0, "set1_2": 0, "set2_3": 0, "set1_3": 0 },
"46": { "set2_1": 0, "set1_1": 0, "set2_2": 0, "set1_2": 0, "set2_3": 0, "set1_3": 0 },
"team_id": 13,
"g": 2,
"team": { "name": "Equipo 13", "id": 13, "game_id": 0 },
"favor": 32,
"contra": 50
},
{
"13": {
"set2_1": 0, "set1_1": 0, "set2_2": 0, "set1_2": 0, "set2_3": 0, "set1_3": 0
},
"17": [],
"18": { "set2_1": 0, "set1_1": 0, "set2_2": 0, "set1_2": 0, "set2_3": 0, "set1_3": 0 },
"20": { "set1_1": 0, "set2_1": 0, "set1_2": 0, "set2_2": 0, "set1_3": 0, "set2_3": 0 },
"46": { "set1_1": 0, "set2_1": 0, "set1_2": 0, "set2_2": 0, "set1_3": 0, "set2_3": 0 },
"team_id": 17,
"g": 2,
"team": { "name": "Equipo 17", "id": 17, "game_id": 0 },
"favor": 0,
"contra": 0
},
{
"13": { "set1_1": 0, "set2_1": 0, "set1_2": 0, "set2_2": 0, "set1_3": 0, "set2_3": 0 },
"17": { "set2_1": 0, "set1_1": 0, "set2_2": 0, "set1_2": 0, "set2_3": 0, "set1_3": 0 },
"18": { "set2_1": 0, "set1_1": 0, "set2_2": 0, "set1_2": 0, "set2_3": 0, "set1_3": 0 },
"20": [],
"46": { "set1_1": 0, "set2_1": 0, "set1_2": 0, "set2_2": 0, "set1_3": 0, "set2_3": 0 },
"team_id": 20,
"g": 2,
"team": { "name": "Equipo 20", "id": 20, "game_id": 0 },
"favor": 50,
"contra": 42
}
],
"3": [
{
"8": { "set1_1": 0, "set2_1": 0, "set1_2": 0, "set2_2": 0, "set1_3": 0, "set2_3": 0 },
"31": { "set1_1": 25, "set2_1": 2, "set1_2": 25, "set2_2": 19, "set1_3": 0, "set2_3": 0 },
"40": { "set2_1": 2, "set1_1": 25, "set2_2": 19, "set1_2": 25, "set2_3": 0, "set1_3": 0 },
"42": [],
"49": { "set2_1": 2, "set1_1": 25, "set2_2": 19, "set1_2": 25, "set2_3": 0, "set1_3": 0 },
"team_id": 42,
"g": 3,
"team": { "name": "Equipo 42", "id": 42, "game_id": 0 },
"favor": 0,
"contra": 0
},
{
"8": { "set2_1": 15, "set1_1": 25, "set2_2": 20, "set1_2": 25, "set2_3": 0, "set1_3": 0 },
"31": { "set2_1": 15, "set1_1": 25, "set2_2": 20, "set1_2": 25, "set2_3": 0, "set1_3": 0 },
"40": [],
"42": { "set1_1": 0, "set2_1": 0, "set1_2": 0, "set2_2": 0, "set1_3": 0, "set2_3": 0 },
"49": { "set1_1": 25, "set2_1": 15, "set1_2": 25, "set2_2": 20, "set1_3": 0, "set2_3": 0 },
"team_id": 40,
"g": 3,
"team": { "name": "Equipo 40", "id": 40, "game_id": 0 },
"favor": 0,
"contra": 0
},
{
"8": { "set2_1": 0, "set1_1": 0, "set2_2": 0, "set1_2": 0, "set2_3": 0, "set1_3": 0 },
"31": [],
"40": { "set1_1": 0, "set2_1": 0, "set1_2": 0, "set2_2": 0, "set1_3": 0, "set2_3": 0 },
"42": { "set2_1": 0, "set1_1": 0, "set2_2": 0, "set1_2": 0, "set2_3": 0, "set1_3": 0 },
"49": { "set1_1": 0, "set2_1": 0, "set1_2": 0, "set2_2": 0, "set1_3": 0, "set2_3": 0 },
"team_id": 31,
"g": 3,
"team": { "name": "Equipo 31", "id": 31, "game_id": 0 },
"favor": 21,
"contra": 50
},
{
"8": [],
"31": { "set1_1": 0, "set2_1": 0, "set1_2": 0, "set2_2": 0, "set1_3": 0, "set2_3": 0 },
"40": { "set1_1": 0, "set2_1": 0, "set1_2": 0, "set2_2": 0, "set1_3": 0, "set2_3": 0 },
"42": { "set2_1": 0, "set1_1": 0, "set2_2": 0, "set1_2": 0, "set2_3": 0, "set1_3": 0 },
"49": { "set2_1": 0, "set1_1": 0, "set2_2": 0, "set1_2": 0, "set2_3": 0, "set1_3": 0 },
"team_id": 8,
"g": 3,
"team": { "name": "Equipo 8", "id": 8, "game_id": 0 },
"favor": 0,
"contra": 0
},
{
"8": { "set1_1": 0, "set2_1": 0, "set1_2": 0, "set2_2": 0, "set1_3": 0, "set2_3": 0 },
"31": { "set2_1": 0, "set1_1": 0, "set2_2": 0, "set1_2": 0, "set2_3": 0, "set1_3": 0 },
"40": { "set2_1": 0, "set1_1": 0, "set2_2": 0, "set1_2": 0, "set2_3": 0, "set1_3": 0 },
"42": { "set1_1": 0, "set2_1": 0, "set1_2": 0, "set2_2": 0, "set1_3": 0, "set2_3": 0 },
"team_id": 49,
"g": 3,
"team": { "name": "Equipo 49", "id": 49, "game_id": 0 },
"favor": 35,
"contra": 50
}
]
},
}
});
In the headers the keys 1,2,3 and then another key with an array with values ​​of the id of each team with whom he is going to play including it example: "1":{"7":[9, 21, 44, 45 , 7] 1 is the group and 7 is the team within the teams with whom he is going to play
in games we have the same values ​​1,2,3 same logic but note that when there is always an object that has an empty array example of team 7 within group 1
"7": [], but their vs who this team is going to play with come like this "9":{"set1_1":22,"set2_1":25,"set1_2":18,"set2_2":25,"set1_3 ":0,"set2_3":0},
9 is his opponent and the sets are the ones won in each example time
team 7 team 9
set1_1: 22 set1_2: 18
set2_1: 18 set2_2: 25
set1_3: 0 set2_3: 0
template:
<v-card class="mt-4" v-for="(header, keyGrupo) in headers" :key="keyGrupo">
<v-card-title> Grupo {{ keyGrupo }}</v-card-title>
<v-simple-table dense>
<template v-slot:default>
<thead>
<tr>
<th></th>
<th v-if="header.EQUIPO">Equipo</th>
<th v-for="(grupo, index) in games[keyGrupo]" :key="index">
{{ index + 1 }} {{ grupo["team"]["name"] }} | {{ grupo['team_id'] }}
</th>
</tr>
</thead>
<tbody>
<tr v-for="(grupo, index) in games[keyGrupo]" :key="index">
<td></td>
<td>
{{ index + 1 }} {{ grupo["team"]["name"] }} {{ grupo['team_id'] }}
</td>
<td v-for="team_ids in header[grupo['team_id']]" v-if="team_ids != grupo['team_id']">
<table>
<tr>
<td >{{ team_ids }}</td>
<td></td>
</tr>
</table>
</td>
</tr>
</tbody>
</template>
</v-simple-table>
</v-card>
In the following results marker the red marked are not the correct ones, since a team cannot play against itself. So the box must be filled with a color and be as a filled box without data, I leave an example of how it should be
In this image we see the same teams with their correct results for each team they play with, also note that in each game against themselves it is in blue, and the results are for each team they played with, I need help with this please

Answer 1

I'm sorry I spent like an hour trying to understand your code. It is unnecessarily too complicated.
Please use classes and proper names for readability and reduce the amount of unnecessary information you provide...
Either way, I think I found your problem. But please address your code before moving on as it will greatly impact debugging further on.
Let's take the first iteration in your for loop:
<td v-for="team_ids in header[grupo['team_id']]" v-if="team_ids != grupo['team_id']">
grupo['team_id']: 9
header[9]: [21, 44, 7, 45, *9*]
header[21]: [44, 45, 7, 9, *21*]
As we go through each member in the array, as you can see in all of your headers the last member is always the team itself. This reflects in what you get in the last column.
So when you check for v-if="team_ids != grupo['team_id']
you're checking v-if="9 != 21" - which is true and you render the data.
Which, by the way I have no idea how this:
<table>
<tr>
<td >{{ team_ids }}</td>
<td></td>
</tr>
</table>
Renders what you show on screenshots. As it should only render 21 for the first column.
To fix this, you should change the order of the team id inside header to match the order of the teams inside games groups. As the data you're rendering for each team is not correct.
Your Equipo 9 vs Equipo 9 first row first column is actually rendering Equipo 9 vs Equipo 21.
Overall I recommend rethinking your data structure and code logic as this is extremely confusing.