fix: perperly handle v-if on <template> scoped slot

fix #6725
vuejs · Oct 10, 2017 · 68bdbf5 · 68bdbf5
1 parent 2d32b5d
commit 68bdbf5
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 3 deletions.
diff --git a/src/compiler/codegen/index.js b/src/compiler/codegen/index.js
@@ -343,11 +343,14 @@ function genScopedSlot (
   if (el.for && !el.forProcessed) {
     return genForScopedSlot(key, el, state)
   }
-  return `{key:${key},fn:function(${String(el.slotScope)}){` +
+  const fn = `function(${String(el.slotScope)}){` +
     `return ${el.tag === 'template'
-      ? genChildren(el, state) || 'void 0'
+      ? el.if
+        ? `${el.if}?${genChildren(el, state) || 'undefined'}:undefined`
+        : genChildren(el, state) || 'undefined'
       : genElement(el, state)
-  }}}`
+  }}`
+  return `{key:${key},fn:${fn}}`
 }
 
 function genForScopedSlot (

diff --git a/test/unit/features/component/component-scoped-slot.spec.js b/test/unit/features/component/component-scoped-slot.spec.js
@@ -557,4 +557,40 @@ describe('Component scoped slot', () => {
       expect(vm.$el.innerHTML).toBe('<span>world foo</span> <span>world bar</span> <span>world abc</span>')
     }).then(done)
   })
+
+  // #6725
+  it('scoped slot with v-if', done => {
+    const vm = new Vue({
+      data: {
+        ok: false
+      },
+      template: `
+        <test>
+          <template v-if="ok" slot-scope="foo">
+            <p>{{ foo.text }}</p>
+          </template>
+        </test>
+      `,
+      components: {
+        test: {
+          data () {
+            return { msg: 'hello' }
+          },
+          template: `
+            <div>
+              <slot :text="msg">
+                <span>{{ msg }} fallback</span>
+              </slot>
+            </div>
+          `
+        }
+      }
+    }).$mount()
+    expect(vm.$el.innerHTML).toBe('<span>hello fallback</span>')
+
+    vm.ok = true
+    waitForUpdate(() => {
+      expect(vm.$el.innerHTML).toBe('<p>hello</p>')
+    }).then(done)
+  })
 })