use an object as v-for's key will clear input's value

[lmk123]

Version

2.3.3

Reproduction link

https://jsfiddle.net/lmk123/fkLhx1n6/

Steps to reproduce

1. Type each person's id in the input fields.
2. Click Shuffle button 10 times

What is expected?

Every person's id should stay in the input fields.

What is actually happening?

Some person's id has been cleared.

---

Only if the array starts with more than 3 items will reproduce this bug.

[lmk123]

@autumnwoodberry I updated my fiddle and use lodash.shuffle to shuffle array, but this bug still reproduce.

[autumnwoodberry]

@lmk123 I was wrong.

I did notice that you don't actually have to click the Add Person button to make this happen. If the original array starts with more than 3 items then the bug will happen.

[lmk123]

@autumnwoodberry Thank you to point it out. I updated my description and fiddle.

[defcc]

Thanks @lmk123 , is there any case you have to do like this, why not just use p.id as the key?

You could refer the key docs here https://vuejs.org/v2/guide/list.html#key.

[javoski]

Although my PR may solve this problem, you'd better only use string or number type value for key attributes.
There's using a plain object to implement map structure inside Vue now (Not native Map object). When you treat an object type value as key of another object, it will automatically convert to string - '[object Object]'.

[posva]

If I recall correctly, key should always be a literal. I thought we added that to the docs

[coolzjy]

@defcc @posva No type restrict to key prop is mentioned in the docs.
However, non-primitive key is necessary, for sometimes there is no id property in an object.

[yyx990803]

There's a reason we don't support object as keys: performance. This diffing part of the code is extremely perf-sensitive, and the extra memory allocation and indexOf vs. an object key lookup is not negligible.

We should add a warning for non-primitive keys, probably in createElement.

Using native Map will solve the problem with less perf hit, but that would make Vue's behavior inconsistent depending on browser support, so this will likely only be supported in a future version where IE9~11 are no longer supported.

I haven't really seen a case where object keys are absolutely necessary - in most cases you can just make sure the objects have ids when you create them. This is somewhat inconvenient, but I don't think it's worth the perf tradeoff.

[windymindy]

Thank you for explanations.
Documentation does not yet mention this, though.
https://vuejs.org/v2/guide/list.html#key