In my most recent project, I utilized Nuxt.Js along with Vuetify.js as the UI framework. The language I used was TypeScript. As part of this project, I attempted to create the image below using arrays.
https://i.sstatic.net/t1Xsc.jpg
export const dummyData = [
{
id: "1",
name: "a",
sub: [
{
id: "1#1",
name: "b",
sub_sub: [
{ id: "1#1#1", name: "b-a" },
{ id: "1#1#2", name: "b-b" },
]
},
{
id: "1#2",
name: "c",
sub_sub: [
{ id: "1#2#1", name: "c-a" },
]
},
]
},
{
id: "2",
name: "d",
sub: [
{
id: "2#1",
name: "e",
sub_sub: [
{ id: "1#2#1", name: "e-a" },
]
}
]
},
]
I believed I had successfully created a data table using the code snippet provided below.
<template>
<div>
<v-simple-table dense>
<thead>
<tr>
<th class="blue lighten-5">name</th>
<th class="blue lighten-5">sub_name</th>
<th class="blue lighten-5">sub_sub_name</th>
</tr>
</thead>
<tbody>
<template v-for="item in items">
<template v-for="(subitem, iSub) in item.sub">
<tr v-for="(sub_subitem, iSub_sub) in subitem.sub_sub" :key="sub_subitem.id">
<td v-if="iSub === 0 & iSub_sub === 0" :rowspan="rowSpanCalc(item)">
{{ item.name }}
</td>
<td v-if="iSub_sub === 0" :rowspan="subitem.sub_sub.length">
{{ subitem.name }}
</td>
<td>{{ sub_subitem.name }}</td>
</tr>
</template>
</template>
</tbody>
</v-simple-table>
</div>
</template>
.
.
.
.
After encountering some issues and seeking help on StackOverflow, I thought everything was working fine until I received feedback from my client reporting an error like the one shown below:
vue.runtime.esm.js?2b0e:619 [Vue warn]: Duplicate keys detected: '1#2#1'. This may cause an update error.
The issue seems to be related to the usage of 'v-bind:key' in my code. Even though I tried to ensure each key is unique, the error still occurred. Any suggestions on how to resolve this problem?