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

[valeriob]

Version

2.3.0

Reproduction link

https://jsfiddle.net/superboy2k/50wL7mdz/38665/

Steps to reproduce

Click Init, Click Update a few times, click Add => see the error in the console

What is expected?

to update the ui correctly

What is actually happening?

TypeError: Cannot read property 'key' of undefined
at sameVnode (unpkg.com/[email protected]:4769)
at updateChildren (unpkg.com/[email protected]:5128)
at patchVnode (unpkg.com/[email protected]:5180)
at updateChildren (unpkg.com/[email protected]:5096)
at patchVnode (unpkg.com/[email protected]:5180)
at updateChildren (unpkg.com/[email protected]:5096)
at patchVnode (unpkg.com/[email protected]:5180)
at Vue$3.patch [as __patch__] (unpkg.com/[email protected]:5305)
at Vue$3.Vue._update (unpkg.com/[email protected]:2327)
at Vue$3.updateComponent (unpkg.com/[email protected]:2443)

[LinusBorg]

Does this also happen when you actually use unique keys? Because keys should be unique, as explained in the docs.

[valeriob]

Yes (updated fiddle, to be sure)

[LinusBorg]

The linked fiddle still has duplicate keys.

Edit: also, you should your splice() to replace array items in a way Vue can track and react to.

And thirdly, your add method pushed a string into an array that should contain objects like { value: ''some text'}

[LinusBorg]

https://jsfiddle.net/Linusborg/50wL7mdz/38692/

[valeriob]

Yea sorry i did not update the link :
https://jsfiddle.net/superboy2k/50wL7mdz/38708/
I do not think that the code in the view model causes the duplication.
If i replace the array assign with array.splice it works ok :
https://jsfiddle.net/superboy2k/3pwttx1L/4/

If i remove one tr from the template, the problem goes away !
<template v-for="msg in messages"> <tr v-bind:key="msg.value">{{msg.value}}</tr> </template>

https://jsfiddle.net/superboy2k/50wL7mdz/38713/

So i updated my code to use array.splice, but the problem is still there.
I tried to detect if there are some duplicated items with this code :
var counts = {};
this.ordini.forEach(x => { counts[x.Id] = (counts[x.Id] || 0) + 1; });
console.log(counts);
But there are not :(

Thanks for helping, it's really driving me crazy :D

[LinusBorg]

• in your first fiddle you still have duplicate keys:

<tr v-bind:key="msg.value">{{msg.value}}</tr>
<tr  v-bind:key="msg.value">{{msg.value}}</tr>

• and in the last one, you don't use .splice()

Please take a look at my version of the fiddle from my previous reply which works without any errors.

If you have further need of support, I suggest to open a thread on forum.vuejs.org (I can help out there as well)

This issue is closed as there's no appearant bug.

[valeriob]

So "duplicate key" means duplicate declaration in template, not duplicate value in the array. That was not clear to me, sorry.

I found the problem, i had indeed a duplicated key, but it was in another template in the same page :D

Thanks @LinusBorg for the support !