Vue: 템플릿은 키를 입력할 수 없지만 템플릿을 div로 바꿀 수 없음 - 래퍼 div 요소가 없는 v-for, 중첩된 v-for 루프가 필요합니다.

Vue: 템플릿은 키를 입력할 수 없지만 템플릿을 div로 바꿀 수 없음 - 래퍼 div 요소가 없는 v-for, 중첩된 v-for 루프가 필요합니다.

다음 JSON이 있습니다.

{
   "data":{
      "1":{
         "color":"red",
         "size":"big"
      },
      "2":{
         "color":"red",
         "size":"big"
      },
      "3":{
         "color":"red",
         "size":"big"
      },
      "4":{
         "color":"red",
         "size":"big"
      },
      "5":{
         "color":"red",
         "size":"big"
      }
   }
}

내가 이걸 가지고 보여주는 건vue코드:

<template>
...

<template v-for="(obj, pos) in this.breakdown" :key="pos">
    <table class="table-auto" >
        <thead>
            <tr>
                <th class="px-4 py-2">Property</th>
                <th class="px-4 py-2">Value</th>
            </tr>
        </thead>

        <tbody>
            <template v-for = "(obj2, pos2) in obj" :key="pos2">
                <tr>
                    <td class="border px-4 py-2">
                        {{pos2}}
                    </td>
                    <td class="border px-4 py-2">
                        {{obj2}}
                    </td>
                </tr>
            </template>
        </tbody>
    </table>
</template>
...
</template>

하지만 나는 그 일을error '<template>' cannot be keyed. Place the key on real elements에러. 대체하면template와 함께span또는div동작합니다만, 스타일링이 모두 어긋나기 때문에, 포장재 요소가 없는 것이 필요합니다.-그것은, 다음의 방법으로만 실현 가능한 것으로 알고 있습니다.template태그를 붙이는데 어떻게 수정해야 할지 모르겠어요.v-for루프하여 오류를 제거합니다.

v-for를 템플릿에 넣고 키를 tr에 입력해 보십시오.

<template v-for="(i, j) in list" >   
            <tr :key="'1tr-'+j"> 
               <td..../>
            </tr>
            <tr :key="'2tr-'+j"> 
               <td..../>
            </tr>
 </template>

이건 나한테 효과가 있어.그랬으면 좋겠다

내 경우 사이드바 메뉴를 렌더링해야 합니다.메뉴 항목은 단일 요소 또는 하위 메뉴일 수 있습니다.이거 해봤어요.

export interface DashboardRoute {
  icon: string
  label: string
  children?: string[]
}

const dashboardRoutes: DashboardRoute[] = [
  {
    label: 'Visão geral',
    icon: 'dashboard',
  },
  {
    label: 'Pessoas',
    icon: 'user',
  },
  {
    label: 'Categorias',
    icon: 'tags',
    children: [
      'Todas as categorias',
      'Alimentação',
      'Refeição',
    ],
  },
]

export default dashboardRoutes

<a-menu v-for="{ icon, label, children } in dashboardRoutes" :key="label" mode="inline">
  <a-sub-menu v-if="children">
    <span slot="title"
      ><a-icon :type="icon" /><span>{{ label }}</span></span
    >
    <a-menu-item v-for="child in children" :key="child">
      {{ child }}
    </a-menu-item>
  </a-sub-menu>
  <a-menu-item v-else>
    <a-icon :type="icon" />
    <span class="nav-text">{{ label }}</span>
  </a-menu-item>
</a-menu>

하지만 이건 옳지 않아.여러 개를 만듭니다.a-menu1개의 요소가 있어야 합니다.

그래서 순진하게 해봤습니다.

<a-menu mode="inline">
  <template v-for="{ icon, label, children } in dashboardRoutes" :key="label">
    <a-sub-menu v-if="children">
      <span slot="title"
        ><a-icon :type="icon" /><span>{{ label }}</span></span
      >
      <a-menu-item v-for="child in children" :key="child">
        {{ child }}
      </a-menu-item>
    </a-sub-menu>
    <a-menu-item v-else>
      <a-icon :type="icon" />
      <span class="nav-text">{{ label }}</span>
    </a-menu-item>
  </template>
</a-menu>

이 에러는, 검출된 에러를 나타내고 있습니다.그래서 검색해봤더니 이 문제가 있더라고요.해결책은 주요 소품을 템플릿에서 첫 번째 자식 요소 또는 형제에게 이동하는 것입니다(존재하는 경우, 그것은 나의 경우).

그래서 해결책은

<a-menu mode="inline">
  <template v-for="{ icon, label, children } in dashboardRoutes">
    <a-sub-menu v-if="children" :key="label"> <!-- key comes here! -->
      <span slot="title"
        ><a-icon :type="icon" /><span>{{ label }}</span></span
      >
      <a-menu-item v-for="child in children" :key="child"> 
        {{ child }}
      </a-menu-item>
    </a-sub-menu>
    <a-menu-item v-else :key="label"> <!-- key comes here! -->
      <a-icon :type="icon" />
      <span class="nav-text">{{ label }}</span>
    </a-menu-item>
  </template>
</a-menu>

Vue는 템플릿 요소의 바인딩 특성을 지원하지 않습니다.:key가 필요하고 "div"를 사용할 수 없는 경우 대신 "span"을 사용할 수 있습니다.

    <span v-for="(obj, pos) in this.breakdown " :key="pos">
       <td >{{pos}}</td>
       <td>{{obj}}</td>
    </span>

v-for의 직접 이동 시도table:

<table class="table-auto" v-for="(obj, pos) in this.breakdown" :key="pos">

언급URL : https://stackoverflow.com/questions/62202741/vue-template-cant-be-keyed-but-cant-replace-template-with-div-need-the-v-f