Javascript Vue：模板可以'；不能键入，但可以'；t用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>

...
财产
价值
{{pos2}}
{{obj2}}
...

---

但是，我得到的

错误“”无法键入。将键放在实元素上

错误。如果我用

span

或

div

替换

template

，它可以工作，但样式都不合适，所以我需要它没有包装器元素-我已经读到只有使用

template

标记才能实现，但是，我不确定如何修改

v-for

循环以删除错误。

尝试将v-for直接移动到

表中

：

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

---

在我的例子中，我需要呈现一个侧边栏菜单。菜单项可以是单个元素或子菜单。我试过这个：

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 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>

{{label}}
{{child}}
{{label}}

尝试将v-for放入模板中，并按tr键

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

---

这对我有用。希望它能

你觉得它合适吗？就像@Anatoly建议的那样，从模板中删除：键，并将其添加到表中。与您的第二个模板密钥相同，将密钥添加到@Anatoly谢谢，它工作得非常好！OP需要一个无包装的迭代器。将v-for移动到元素中使该元素成为包装器。请看@michaelpacheco的解决方案。对我来说，这似乎也是一个尖刻的想法。如果至少有2行，你会得到多个头。这应该是OP和那些需要无包装迭代的人可以接受的解决方案。这是正确的答案。

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