fix(transition): check existence of el.parentNode (#8422)

fix #8199 * fix(transition): check existence of `el.parentNode` If the new parentNode gets a `textContent` or `innerHTML` property during patching, the `transition` node would have been detached early, which means `el.parentNode` no longer exists. * fix(vdom): should not reuse nodes with `textContent` / `innerHTML` props
vuejs · Oct 24, 2018 · 0b16927 · 0b16927
1 parent 8f04135
commit 0b16927
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 1 deletion.
diff --git a/src/core/vdom/patch.js b/src/core/vdom/patch.js
@@ -32,13 +32,20 @@ export const emptyNode = new VNode('', {}, [])
 
 const hooks = ['create', 'activate', 'update', 'remove', 'destroy']
 
+function childrenIgnored (vnode) {
+  return vnode && vnode.data && vnode.data.domProps && (
+    vnode.data.domProps.innerHTML || vnode.data.domProps.textContent
+  )
+}
+
 function sameVnode (a, b) {
   return (
     a.key === b.key && (
       (
         a.tag === b.tag &&
         a.isComment === b.isComment &&
         isDef(a.data) === isDef(b.data) &&
+        !childrenIgnored(a) && !childrenIgnored(b) &&
         sameInputType(a, b)
       ) || (
         isTrue(a.isAsyncPlaceholder) &&

diff --git a/src/platforms/web/runtime/modules/transition.js b/src/platforms/web/runtime/modules/transition.js
@@ -251,7 +251,7 @@ export function leave (vnode: VNodeWithData, rm: Function) {
       return
     }
     // record leaving element
-    if (!vnode.data.show) {
+    if (!vnode.data.show && el.parentNode) {
       (el.parentNode._pending || (el.parentNode._pending = {}))[(vnode.key: any)] = vnode
     }
     beforeLeave && beforeLeave(el)

diff --git a/test/unit/features/transition/transition.spec.js b/test/unit/features/transition/transition.spec.js
@@ -1167,5 +1167,27 @@ if (!isIE9) {
         expect(vm.$el.innerHTML).toBe('<!---->')
       }).then(done)
     })
+
+    // #8199
+    it('should not throw error when replaced by v-html contents', (done) => {
+      const vm = new Vue({
+        template: `
+          <div>
+            <div v-if="ok" :class="ok">
+              <transition>
+                <span>a</span>
+              </transition>
+            </div>
+            <div v-else v-html="ok"></div>
+          </div>
+        `,
+        data: { ok: true }
+      }).$mount(el)
+
+      vm.ok = false
+      waitForUpdate(() => {
+        expect(vm.$el.children[0].innerHTML).toBe('false')
+      }).then(done)
+    })
   })
 }