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

[vvpvvp]

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>

[posva]

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

[vvpvvp]

@posva , you can see this issue : #5410

@yyx990803 :

You are using the index as the key... which is the same as no key at all. You should give each of your data objects a unique id so that they can be keyed properly.

@posva ，I know, if there a show list, we don't need it, but we has so many edit things.

[nickmessing]

@vvpvvp, that's the point, we vue can not know how developer wants key to work, index is unique key example but most of the time it's not what you are looking for, how can Vue know what you wanted?

[vvpvvp]

@nickmessing , I just want v-for has no question when i use it normal.
for example, I wrote an common table component , and it used v-for list data, and have some operate staffs, we don't know data's key prop, or there is no key completely.
how can I do, I used object as key.
but now, it's not advocated.

and, If I don't use key, there is some problem we not expected.
you can see this issus: #5408

[posva]

I thought you were forcing yourself to use a key. You don't always need keys
You need unique keys for your objects, you probably have some kind of id. as @nickmessing said, Vue cannot guess it for you... Its guess is using the index

[vvpvvp]

@posva , I thought you are missing this point :

You are using the index as the key... which is the same as no key at all. --- from yyx990803.

I don't want force myself to use a key, it's because if I don't use it, it will be something wrong.
link: https://codepen.io/vvpvvp/pen/oZKpgE
steps:
1: click "add" twice
2: click the last line 'click me'.
3: click the first line 'delete'.

[posva]

that's why I told you to use the index... because it should be the same...
You can generate a unique id with every object, and in your case, you need it. That's what we're trying to tell you

[Kingwl]

Hi @vvpvvp
as @posva said you should generate a key
workaround by https://github.com/puleos/object-hash
eg: https://codepen.io/anon/pen/NvGwyQ

[jkzing]

@vvpvvp , the point is Vue cannot infer a unique key for you, what vue can do and already does is to infer a key based on index.

If there are operations like "add" or "delete" elements in list, you really should generate a unique yourself. A simply counter could do the trick.

[vvpvvp]

@Kingwl , I understand.
so, I have a question, what's the difference between we generate and vue generate.
why not vue do it by itself, yes, you don't know what we want, so I told you, I has no key in my data when I use v-for, and I need edit some data or do some thing else, and could you please generate unique keys for us?

[Kingwl]

@vvpvvp calm down my friend 😅
generate unique keys is so complex to cover all case
and it not too hard to generate a unique key by user

and IMO this behavior is not normal...i(we) will try to improve it
have @yyx990803 got some advice?

[posva]

Vue cannot generate the unique keys for you because it doesn't know how or when you add or delete items. But it's super easy to add an id. Without using hash you can use an incrementing id: https://codepen.io/posva/pen/BdoJJz

[Kingwl]

he told you that is a unexpected behavior not expected behavior 🌚
and add a key can resolve that