Fix: nested child elements can not be updated correctly, fix vuejs#5618 (vuejs#5627)

gebilaoxiong · yyx990803 · commit f2bd88207391 · 2017-05-09T23:21:49.000+08:00
* fix:nested elements can not be updated correctly

* add tests

* ensure nestedIndex is always passed down
diff --git a/src/core/instance/render-helpers/render-list.js b/src/core/instance/render-helpers/render-list.js
@@ -1,6 +1,6 @@
 /* @flow */
 
-import { isObject } from 'core/util/index'
+import { isObject, isDef } from 'core/util/index'
 
 /**
  * Runtime helper for rendering v-for lists.
@@ -28,5 +28,8 @@ export function renderList (
       ret[i] = render(val[key], key, i)
     }
   }
+  if (isDef(ret)) {
+    (ret: any)._isVList = true
+  }
   return ret
 }
diff --git a/src/core/vdom/helpers/normalize-children.js b/src/core/vdom/helpers/normalize-children.js
@@ -1,7 +1,7 @@
 /* @flow */
 
 import VNode, { createTextVNode } from 'core/vdom/vnode'
-import { isFalse, isDef, isUndef, isPrimitive } from 'shared/util'
+import { isFalse, isTrue, isDef, isUndef, isPrimitive } from 'shared/util'
 
 // The template compiler attempts to minimize the need for normalization by
 // statically analyzing the template at compile time.
@@ -58,7 +58,10 @@ function normalizeArrayChildren (children: any, nestedIndex?: string): Array<VNo
         res[res.length - 1] = createTextVNode(last.text + c.text)
       } else {
         // default key for nested array children (likely generated by v-for)
-        if (isDef(c.tag) && isUndef(c.key) && isDef(nestedIndex)) {
+        if (isTrue(children._isVList) &&
+          isDef(c.tag) &&
+          isUndef(c.key) &&
+          isDef(nestedIndex)) {
           c.key = `__vlist${nestedIndex}_${i}__`
         }
         res.push(c)
diff --git a/test/unit/features/component/component-slot.spec.js b/test/unit/features/component/component-slot.spec.js
@@ -639,4 +639,25 @@ describe('Component slot', () => {
       expect(vm.$el.textContent).toBe('2foo')
     }).then(done)
   })
+
+  it('the elements of slot should be updated correctly', done => {
+    const vm = new Vue({
+      data: { n: 1 },
+      template: '<div><test><span v-for="i in n" :key="i">{{ i }}</span><input value="a"/></test></div>',
+      components: {
+        test: {
+          template: '<div><slot></slot></div>'
+        }
+      }
+    }).$mount()
+    expect(vm.$el.innerHTML).toBe('<div><span>1</span><input value="a"></div>')
+    const input = vm.$el.querySelector('input')
+    input.value = 'b'
+    vm.n++
+    waitForUpdate(() => {
+      expect(vm.$el.innerHTML).toBe('<div><span>1</span><span>2</span><input value="a"></div>')
+      expect(vm.$el.querySelector('input')).toBe(input)
+      expect(vm.$el.querySelector('input').value).toBe('b')
+    }).then(done)
+  })
 })
diff --git a/test/unit/modules/vdom/create-element.spec.js b/test/unit/modules/vdom/create-element.spec.js
@@ -152,4 +152,32 @@ describe('create-element', () => {
     }).$mount()
     expect('Avoid using observed data object as vnode data').toHaveBeenWarned()
   })
+
+  it('nested child elements should be updated correctly', done => {
+    const vm = new Vue({
+      data: { n: 1 },
+      render (h) {
+        const list = []
+        for (let i = 0; i < this.n; i++) {
+          list.push(h('span', i))
+        }
+        const input = h('input', {
+          attrs: {
+            value: 'a',
+            type: 'text'
+          }
+        })
+        return h('div', [[...list, input]])
+      }
+    }).$mount()
+    expect(vm.$el.innerHTML).toBe('<span>0</span><input value="a" type="text">')
+    const el = vm.$el.querySelector('input')
+    el.value = 'b'
+    vm.n++
+    waitForUpdate(() => {
+      expect(vm.$el.innerHTML).toBe('<span>0</span><span>1</span><input value="a" type="text">')
+      expect(vm.$el.querySelector('input')).toBe(el)
+      expect(vm.$el.querySelector('input').value).toBe('b')
+    }).then(done)
+  })
 })

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`/* @flow */`
`2`	`2`
`3`		`-import { isObject } from 'core/util/index'`
	`3`	`+import { isObject, isDef } from 'core/util/index'`
`4`	`4`
`5`	`5`	`/**`
`6`	`6`	`* Runtime helper for rendering v-for lists.`
`@@ -28,5 +28,8 @@ export function renderList (`
`28`	`28`	`ret[i] = render(val[key], key, i)`
`29`	`29`	`}`
`30`	`30`	`}`
	`31`	`+ if (isDef(ret)) {`
	`32`	`+ (ret: any)._isVList = true`
	`33`	`+ }`
`31`	`34`	`return ret`
`32`	`35`	`}`