the string constructor cannot be used as a `key`

[mightyguava]

Version

2.6.11

Reproduction link

https://codesandbox.io/s/practical-shaw-br23c

Steps to reproduce

Open the codesandbox and you'll see a warning like [Vue warn]: Duplicate keys detected: 'constructor'. This may cause an update error.

Click the "swap" button TWICE to swap the list in the data, triggering the error.

If the literal string "constructor" in the first list is changed for any other string, there are no errors or warnings.

What is expected?

The list should swap between the "first" and "second" list

What is actually happening?

"TypeError: Cannot read property 'key' of undefined"

---

:( this was a hard bug to track down.

[veaba]

As same, key name don't use __proto__'

[posva]

I'm not sure if it's possible to allow reserved properties like those in the current codebase.
Otherwise, the warning message should be different

[mightyguava]

If the problem was that you can't do v-bind:key="foo.constructor", because constructor is a reserved property, that's probably an ok thing to not support. But the problem here is that v-bind:key="foo.name" cannot resolve to the string "constructor".

This seems like a fairly scary bug, since it can cause Vue's rendering loop to arbitrary break when trying to render valid data. If I had to guess Vue is probably using the value of the key as a lookup key in an Object, rather than in a proper Map type? I'm new to Vue, so I'm probably oversimplifying things.

For context, in my case, I'm using normalized names for some database entities as a unique key (with a unique constraint in the db). One of those entities happens to be called "constructor", and using the unique name as the key completely breaks Vue. I could use the primary key for the key, but I didn't really want to leak the db's primary keys to the frontend.

Also, what does the discussion label mean?

[yangguansen]

Yes, Vue use key as a lookup key in an Object to avoid duplicate keys, and constructor is a original property in Object. So the constructor KEY has been exist in Object.
So, DO NOT use property of Prototype chain as key.

You can use like below:

<div v-for="(topic,index) in topics" :data-someKey="topic.name" v-bind:key="index">
    <div>{{ topic.name }}</div>
</div>

Then you can get the value of someKey by HTML5 DOM method.