Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Can't set key prop within v-for loop in template

See original GitHub issue

Describe the bug

Can’t set key prop on sub component within v-for loop in template

Reproduction

https://stackblitz.com/edit/vue3-vite-router-starter-plun8w?file=src/views/Home.vue

System Info

System:
    OS: Windows 10 10.0.22000
    CPU: (12) x64 Intel(R) Core(TM) i5-10400 CPU @ 2.90GHz
    Memory: 3.94 GB / 15.75 GB
  Binaries:
    Node: 16.13.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.15 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 8.1.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.22000.120.0), Chromium (102.0.1245.30)
    Internet Explorer: 11.0.22000.120

Used Package Manager

npm

Logs

No response

Validations

Follow our Code of Conduct
Read the Contributing Guidelines.
Read the docs.
Check that there isn’t already an issue that reports the same bug to avoid creating a duplicate.
Make sure this is a Vite issue and not a framework-specific issue. For example, if it’s a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/core instead.
Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
The provided reproduction is a minimal reproducible example of the bug.

Issue Analytics

State:
Created a year ago
Comments:5 (3 by maintainers)

Top GitHub Comments

1reaction

tony19commented, Jun 10, 2022

I don’t think this is a bug at all. There’s no need for the key on the v-for children, as the key is already on the <template>. The solution here is to remove the key from <CollapsePanel>.

1reaction

sapphi-redcommented, Jun 10, 2022

It is a upstream bug. Please report to vuejs/core. vue sfc playground reproduction

Closing as it is not related to Vite.

Top Results From Across the Web

Loop inside React JSX - Stack Overflow

map() to loop through your collection and return <ObjectRow> items with props from each iteration. Assuming objects is an array somewhere... <tbody> {...

A Beginner's Guide to Loops in React JSX - Telerik

Wondering how to create loops in React? Learn about JSX and how to use methods like the map function to loop inside React...

How to use loop in React.js? - DEV Community ‍ ‍

It is very popular to use loops like for-loop (in most cases the fastest one), for-in, or for-of to iterate through elements. That...

for...in - JavaScript | MDN - MDN Web Docs

The loop will iterate over all enumerable properties of the object itself and those the object inherits from its prototype chain (properties of ......

List Rendering - Vue.js

Inside v-for blocks we have full access to parent scope properties. v-for also supports an optional second argument for the index of the...