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