请求将 :key 放置在 <template> 上时出错

Question

因为没有:key="item.id"上<template>，我收到此错误：

\n

\n

但当我把它放在那里时：

\n

<template v-for="item in Object.values(cart)" :key="item.id">\n

\n

\xe2\x80\xa6然后我收到此错误：

\n

\n

这是有问题的代码：

\n

          <template v-for="item in Object.values(cart)">\n            <tr :key="item.id">\n              <td>Digest {{ item.digestId }}</td>\n              <td>{{ item.duration_text }} subscription</td>\n              <td class="price-cell">${{ roundMoney(item.price, 2) }}</td>\n              <td class="trash-cell">\n                <fa-icon icon="times-circle" size="lg" @click="removeItem(item)" />\n              </td>\n            </tr>\n            <tr v-if="item.discounts.length" :key="`${item.id}-${item.discounts && item.discounts[0].id}`">\n              <td colspan="2">\n                <label>Code: {{ item.discounts[0].code }}</label>\n              </td>\n              <td colspan="2">\n                <span class="discount-amount">\xe2\x80\x93${{ item.discounts[0].percent_off }}</span>\n              </td>\n              <td class="trash-discount-cell">\n                <fa-icon icon="times-circle" class="trash" @click="rmDscnt(item.discounts[0])" />\n              </td>\n            </tr>\n          </template>\n

\n

我该如何解决这个看似循环的问题？

\n

Answer 1

虽然这个问题已经过去一年了，但最近在和别人讨论中也遇到了类似的问题，并找到了问题的原因。希望我的回答可以帮助到其他看到这个答案的朋友。

提问者的标签是vue3。在vue3中，模板标签上使用了v-for标准语法，将key写入模板标签上。请参阅此处的官方文档： https: //v3.vuejs.org/guide/list.html#v-for-on-a-template。

如下：

<template v-for="item in Object.values(cart)" :key="item.id">

我认为提问者无限循环错误的原因是同时使用了vue2和vue3的规则。我的vue2项目使用volar插件也导致这个错误。在模板标签上使用v-for，vue2和vue3使用两种规则。

vue2: vue/no-v-for-template-key vue3: vue/no-v-for-template-key-on-child

这两条规则相互冲突。这是官方指导文档：https://eslint.vuejs.org/rules/no-v-for-template-key-on-child.html

我没有给出解决方案，因为我不清楚提问者的其他配置，但我想我已经找到原因了，希望能帮助你排查问题

Answer 2

Vue 使用模板标签来知道它是否是一个组件，就像 React 一样，你必须返回一个元素，试试这个：

\n

      <template>\n        <div>\n         <section v-for="item in Object.values(cart)">\n        <tr :key="item.id">\n          <td>Digest {{ item.digestId }}</td>\n          <td>{{ item.duration_text }} subscription</td>\n          <td class="price-cell">${{ roundMoney(item.price, 2) }}</td>\n          <td class="trash-cell">\n            <fa-icon icon="times-circle" size="lg" @click="removeItem(item)" />\n          </td>\n        </tr>\n        <tr v-if="item.discounts.length" :key="`${item.id}-${item.discounts && item.discounts[0].id}`">\n          <td colspan="2">\n            <label>Code: {{ item.discounts[0].code }}</label>\n          </td>\n          <td colspan="2">\n            <span class="discount-amount">\xe2\x80\x93${{ item.discounts[0].percent_off }}</span>\n          </td>\n          <td class="trash-discount-cell">\n            <fa-icon icon="times-circle" class="trash" @click="rmDscnt(item.discounts[0])" />\n          </td>\n        </tr>\n        </section>\n        </div>\n      </template>\n

\n