<template v-for> key should be placed on the <template> tag.

[hisland]

Vue - Official extension or vue-tsc version

v2.0.21

VSCode version

1.90.1(system setup)

Vue version

3.4.27

TypeScript version

5.4.5

System Info

No response

Steps to reproduce

just open the repoduction link, you will see the error

Link to minimal reproduction

https://play.vuejs.org/#eNqtU01PwzAM/StWLgWpbAc4TRsSoB3GARBwIxy61m2ztUmUpGXTtP+Ok677kKZJSByqxu8928+ts2EPWg/aBtmIjW1qhHZg0TX6nktRa2UcbMBgDlvIjaohImnEJZepktZBbQuYeP7qK0qiOJrTk0bf11yOh101qkOBw1pXiUOKYJyJ1r+7wwzKpEVIKoNJtgbdOFjiGpSEPgfam1yZGOZEzUAiZpBI5Uo0e2WJkJaiykDlh7RCOUBjlBkP9x1Pa044E4T4LBqEMxhRwR3IWcjoXJ4lAEqsKrVTHXoMj4fthyyEHxKcEemSmos8Dv7U8r/NheIUOdPg36z2+AnKYuYs/etcFIOFVZLWZONTOUtVrUWF5lU7QbvA2QgC47mEmv08B8z7iHs8LTFdnsEXduUxzt4MWjQtOd9zLjEFuo6efrzgis57slZZU5H6AvmOVlWN99jJHhuZke0jXXA7C8suZPFppyuH0vZDhQ9Jym3Qc0YX4OnC6Ae7t4O7kMfllm1/AR1FHbs=

Any additional comments?

I use arco-vue https://arco.design/vue/en-US/component/menu#API The doc here need a key on the component when I use v-for , I have alrady put key on template, then put a key on component, got this error

[kermanx]

This is the expected behavior of Volar. Vue doesn't allow/compile when an element has two keys, e.g.

<script setup>
import { ref } from 'vue'
const msg = ref(['a','b','c'])
</script>

<template>
 <template v-for="item, i of msg" :key="I">  <!-- KEY 1 for <div> -->
    <div :key="item">  <!-- KEY 2 for <div> -->
      hello
    </div>
  </template>
</template>

I think in your situation, you can just remove the key attribute from MenuItem, because the key is given by the template v-for. You can also write your code like this:

<MenuItem v-for="..." :key="id">
  ...
</MenuItem>

[hisland]

thanks, that's one solution

but template is a fragment, if I put more than one element inside it

<script setup>
import { ref } from 'vue'
const msg = ref(['a','b','c'])
</script>

<template>
 <template v-for="item, i of msg" :key="i">
    <div :key="item"> 
      hello
    </div>
    <div :key="item + 2">
      hello 2
    </div>
  </template>
</template>

this is a valid usage, it reminder me error too

https://play.vuejs.org/#eNqtU81KxDAQfpUhlyrWXfw5LVVQ8bAeVNSb8VDbaRu3TUKS1pVl391JausKy4rgoTT5fibfDMmKXWg96VpkM5bYzAjtwKJr9TmXotHKOFiBwQLWUBjVQETSiEsuMyWtg8aWcOb5vecojeLolb4setnnMpn21agObRw2uk4d0g6SXHT+3y/mUKUdQlobTPMP0K2DBX6AkjB4oDsslInhlag5SMQcUqlchWZUVghZJeocVPFtK5UDNEaZZDqe+LPmGWeCEO+iRjiDGRX8AjkLjj7lJnFwNFIAFda1+tKNp2zxHP/mSaabIxpGUwo/GnBGZAuKLIo4dKUW/9sSyXxx2jnT4t+iDvgPlMXMWbohhSgnb1ZJulwrb+UsU40WNZo77QTdIM5mEBjPpXTY+03AfI54wLMKs8UW/M0uPcbZvUGLpqPkI+dSU6Lr6evHW1zSeiQblbc1qXeQD2hV3fqMveyylTnF3tCFtPPwRIQsn+z10qG0Q1NhkKRcBz1n9GyudrT+Hfdkchp8XK7Z+hMo0yza

[davidmatter]

I'm not sure this is accounted for in vue/core. Haven't seen any docs with multiple elements inside a <template v-for..

[kermanx]

this is a valid usage, it reminder me error too

play.vuejs.org#eNqtU81KxDAQfpUhlyrWXfw5LVVQ8bAeVNSb8VDbaRu3TUKS1pVl391JausKy4rgoTT5fibfDMmKXWg96VpkM5bYzAjtwKJr9TmXotHKOFiBwQLWUBjVQETSiEsuMyWtg8aWcOb5vecojeLolb4setnnMpn21agObRw2uk4d0g6SXHT+3y/mUKUdQlobTPMP0K2DBX6AkjB4oDsslInhlag5SMQcUqlchWZUVghZJeocVPFtK5UDNEaZZDqe+LPmGWeCEO+iRjiDGRX8AjkLjj7lJnFwNFIAFda1+tKNp2zxHP/mSaabIxpGUwo/GnBGZAuKLIo4dKUW/9sSyXxx2jnT4t+iDvgPlMXMWbohhSgnb1ZJulwrb+UsU40WNZo77QTdIM5mEBjPpXTY+03AfI54wLMKs8UW/M0uPcbZvUGLpqPkI+dSU6Lr6evHW1zSeiQblbc1qXeQD2hV3fqMveyylTnF3tCFtPPwRIQsn+z10qG0Q1NhkKRcBz1n9GyudrT+Hfdkchp8XK7Z+hMo0yza

It seems that the code in this playground link can't be compiled by Vue. If you think this is a valid usage, please report it to github.com/vuejs/core first. Thanks a lot.