From 20b46155ab29c7d72a65d1d80ca0c8c93b250288 Mon Sep 17 00:00:00 2001 From: Daniel Santana Rocha Date: Mon, 1 Oct 2018 11:10:47 -0300 Subject: [PATCH 1/2] fix(patch.js): Added a check for duplicated keys before addVnodes in patchVnodes function. Added a check for duplicated keys in the case that addVnodes is called instead of createChildren or updateChildren. This cover the case when a empty div is change into a div with a list of childrens with a duplicated key inside after initial rendering (see issue #8832). fix #8832 --- src/core/vdom/patch.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/core/vdom/patch.js b/src/core/vdom/patch.js index 676499dc69e..a0743314e6f 100644 --- a/src/core/vdom/patch.js +++ b/src/core/vdom/patch.js @@ -543,6 +543,9 @@ export function createPatchFunction (backend) { if (isDef(oldCh) && isDef(ch)) { if (oldCh !== ch) updateChildren(elm, oldCh, ch, insertedVnodeQueue, removeOnly) } else if (isDef(ch)) { + if (process.env.NODE_ENV !== 'production') { + checkDuplicateKeys(ch) + } if (isDef(oldVnode.text)) nodeOps.setTextContent(elm, '') addVnodes(elm, null, ch, 0, ch.length - 1, insertedVnodeQueue) } else if (isDef(oldCh)) { From b704afe594ded2e7b03af6080e62eee01292ae45 Mon Sep 17 00:00:00 2001 From: Daniel Santana Rocha Date: Mon, 1 Oct 2018 11:13:28 -0300 Subject: [PATCH 2/2] test(children.spec.js): Added a test checking for the duplicate keys warning in the case of patchVno This test cover the case that a empty div changes to a div with children with repeated keys after initial load (see issue #8832). test #8832 --- test/unit/modules/vdom/patch/children.spec.js | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/test/unit/modules/vdom/patch/children.spec.js b/test/unit/modules/vdom/patch/children.spec.js index ec4d521955c..f42c5413edd 100644 --- a/test/unit/modules/vdom/patch/children.spec.js +++ b/test/unit/modules/vdom/patch/children.spec.js @@ -530,4 +530,16 @@ describe('vdom patch: children', () => { patch(vnode2, vnode3) expect(`Duplicate keys detected: 'b'`).toHaveBeenWarned() }) + + it('should warn with duplicate keys: patchVnode with empty oldVnode', () => { + function makeNode (key) { + return new VNode('li', { key: key }) + } + + const vnode1 = new VNode('div') + const vnode2 = new VNode('div', undefined, ['1', '2', '3', '4', '4'].map(makeNode)) + + patch(vnode1, vnode2) + expect(`Duplicate keys detected: '4'`).toHaveBeenWarned() + }) })