Vue 3 key attribute changes - key placement on template v-for, v-if branches. Triggers when user mentions: - "key attribute vue 3" - "template v-for key vue 3" - "v-if key vue 3"
Key attribute placement changed in Vue 3 for template v-for and v-if/v-else branches.
<div v-if="condition" key="yes">Yes</div>
<div v-else key="no">No</div>
Keys are now auto-generated. Remove manual keys:
<div v-if="condition">Yes</div>
<div v-else>No</div>
If you provide keys manually, each branch must have a unique key:
<!-- Both keys must be unique -->
<div v-if="condition" key="a">Yes</div>
<div v-else key="b">No</div>
Key went on children:
<template v-for="item in list">
<div :key="'heading-' + item.id">...</div>
<span :key="'content-' + item.id">...</span>
</template>
Key goes on the <template> tag:
<template v-for="item in list" :key="item.id">
<div>...</div>
<span>...</span>
</template>
<!-- Vue 2 -->
<template v-for="item in list">
<div v-if="item.isVisible" :key="item.id">...</div>
<span v-else :key="item.id">...</span>
</template>
<!-- Vue 3 -->
<template v-for="item in list" :key="item.id">
<div v-if="item.isVisible">...</div>
<span v-else>...</span>
</template>
<template v-for> tag