question-mark
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.

v-for : add a prop 'uniqueKey' to generates a unique key automatically

See original GitHub issue

What problem does this feature solve?

In our business system, there is so many :key object used. We did so many data operate, we have to use it. And now, object key is not advocated, and I’m wondering if there is some prop can do it automatically. It’s will be helpful.

What does the proposed API look like?

<div v-for="item of list" :unique-key="true"></div>

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Reactions:1
  • Comments:28 (15 by maintainers)

github_iconTop GitHub Comments

26reactions
posvacommented, Dec 20, 2018

You can use the index for this (this is if you don’t care about Vue reusing the elements or components). Keep in mind key is not always required

<div v-for="(item, index) in items" :key="index">
  <!-- content -->
</div>

more at https://vuejs.org/v2/guide/list.html#key

5reactions
cyberm1ndcommented, Sep 8, 2017

@vvpvvp, i understand your problem. The main problem with key here is if your data realy have unique ids but, when you create new items in list/table you add them with blank ids like 000-000, then when it goes to server it generates proper uids. But as far as your are in edit mode and adding new items you don’t realy want to generate ids for them, server needs em as blank, so to handle this problem you have to add another one ids and that’s not realy something you want. Adding an option that would generate keys for inner Vue use seems legit request.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Generating Unique Keys for Vue Components - Jack Maurer
Generating Unique Keys for Vue Components ... In its documentation, Vue recommends that you use the key attribute with v-for loops whenever ...
Read more >
How to create unique keys for React elements? - Stack Overflow
There are many ways in which you can create unique keys , the simplest method is to use the index when iterating arrays....
Read more >
The quick, lazy but effective way to create unique keys for ...
We need to add a UUID key to the <li></li> elements. Generally wherever you see an array.map() it is a safe bet we...
Read more >
Warning: Each Child in a List Should Have a Unique 'key' Prop
When creating a list in the UI from an array with JSX, you should add a key prop to each child and to...
Read more >
Auto assigning unique key to each child of a list in React
This is because React uses a unique “key” prop on each child of the list to create a relationship between the component and...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found