如何在 Vue.Js 的 v-for 循环中转义“检测到重复键”？

Question

我在最近的项目中使用了 Nuxt.Js，也使用了 Vuetify.js 作为 UI 框架，语言是 TypeScript。 我尝试使用以下数组制作下面的这张图片。

    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" },
                ]
            }
        ]
    },
]

我以为我完成了使用以下代码制作数据表。

    <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>
<script lang="ts">
import { Component, Vue } from 'nuxt-property-decorator'
import { dummyData } from '~/store/dummy'

@Component({})
export default class extends Vue {
  items: any = []

  created() {
    this.items = dummyData
  }

  rowSpanCalc(item: any) {
    const count = item.sub.reduce(
      (total: any, curr: any) => total + curr.sub_sub.length,
      0
    )
    console.log(count);
    return count;
  }
}
</script>
<style lang="scss" scoped>
table {
  border-collapse: collapse !important;
}
.v-data-table--dense > .v-data-table__wrapper > table > tbody > tr > td {
  border-bottom: thin solid rgba(0, 0, 0, 0.12) !important;
}
</style>

我在 stackoverflow 中询问了有关这些问题的问题。 最后我以为它已经完成了！......但是几天后，我的客户问了一些错误，如下所示。

vue.runtime.esm.js?2b0e:619 [Vue warn]: Duplicate keys detected: '1#2#1'. This may cause an update error.

我的代码似乎没有问题。但它有一些关于 v-bind:key 的问题。 在模板中，我知道“v-bind:key”标签不能使用重复键。 如果我在模板中使用一些“v-bind:key”，我会使用迭代器来区分每个“v-bind:key”。 这就是为什么我使用了一个 "v-bind:key" ，但发生了错误。 这对我来说是一个非常头疼的问题。

我如何在运行此代码时修复错误？ 谁能给我建议？

Answer 1

键必须是唯一的。有一个键，所有 3 个循环的各自索引的组合

<template v -for="(item,item_index) in items">
    <template v -for="(subitem, iSub) in item.sub">
      <tr
        v
        -for="(sub_subitem, iSub_sub) in subitem.sub_sub"
        :
        key="`${item_index}-${iSub_sub}-${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>

Answer 2

它正在做的正是它在锡上所说的：[Vue warn]: Duplicate keys detected: '1#2#1'. This may cause an update error.

您的数据使用 "1#2#1" 作为多个项目的 id。

如果您将数据更正为具有唯一 ID，则错误将消失，如下所示：

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: [
                    // I changed "1#2#1" to "1#2#2"
                    { id: "1#2#2", name: "e-a" },
                ]
            }
        ]
    },
]