I am stuck trying to assign row number for a table.
The rendered “rowNumber” on each row have wrong values.
this is the example code: https://jsfiddle.net/erxwjmts/2/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Alpine.js v3.x Ejemplo</title>
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">
</head>
<body class="p-m" x-data="componentData">
<table class="table table-bordered table-responsive table-hover m-t-md">
<thead>
<tr>
<th> Number </th>
<th> Sample Field </th>
<th> Indexes </th>
</tr>
</thead>
<tbody>
<template x-for="(group1, index1) in arrayGroup1" :key="index1">
<template x-for="(group2, index2) in group1.arrayGroup2" :key="index2">
<template x-for="(group3, index3) in group2.arrayGroup3" :key="index3">
<template x-for="(group4, index4 ) in group3.arrayGroup4" :key="index4">
<tr>
<td>
row number:
<span x-text="rowNumber++"></span>
</td>
<td>
<span x-text="group4.location"></span>
</td>
<td>
<div x-text="'index1:' + index1"></div>
<div x-text="'index2:' + index2"></div>
<div x-text="'index3:' + index3"></div>
<div x-text="'index4:' + index4"></div>
</td>
</tr>
</template>
</template>
</template>
</template>
</tbody>
</table>
</body>
</html>
and the js script
<script>
document.addEventListener('alpine:init', () => {
Alpine.data('componentData', () => ({
"rowNumber": 0,
"arrayGroup1": [{
"id": 684,
"formalName": "TRADING COMPANY NORTHERN ROSES LLC",
"arrayGroup2": [{
"nickName": "no-nickName",
"arrayGroup3": [{
"sid": "cid_11527",
"type": "TypeOne",
"id": 11527,
"arrayGroup4": [{
"location": "ESSAY LIVE, JOHN DOE, PLACE: SUGAR LOAF",
"samples": [{
"date": "2023-06-23",
"id": 66357
},
{
"date": "2023-06-23",
"id": 66356
}
]
},
{
"location": "ESTATE FUTACUIN ROUTE 215 KM 60- PUYEHUE",
"samples": [{
"date": "2023-06-23",
"id": 66354
}]
}
]
}]
},
{
"nickName": "John What",
"arrayGroup3": [{
"sid": "cid_11339",
"type": "TypeOne",
"id": 11339,
"arrayGroup4": [{
"location": "SOME LOCATION BETWEEN STATES",
"samples": [{
"date": "2023-06-23",
"id": 66355
}]
}]
}]
}
]
},
{
"id": 4556,
"formalName": "JOHN DOE SMITH JOHNSON",
"arrayGroup2": [{
"nickName": "no-nickName",
"arrayGroup3": [{
"sid": "pid_1707",
"type": "TypeTwo",
"id": 1707,
"arrayGroup4": [{
"location": "THE APPLE ORCHARD, SAINT CHARLES",
"samples": [{
"date": "2023-06-23",
"id": 66347
}]
}]
},
{
"sid": "cid_11577",
"type": "TypeOne",
"id": 11577,
"arrayGroup4": [{
"location": "ROSE FLOWER, SAINT DOMINGO VALLEY",
"samples": [{
"date": "2023-06-22",
"id": 66346
}]
}]
}
]
}]
}
]
}));
});
</script>
I get this advice from github: “Just put elements between the layers that have display: content Or fix your data.” But sorry I don’t understood that or how to fix it.
for now I use CSS counters, but it is not the ideal.
thanks
