8000 handle fallback content for slot content with v-if (close #2144) · GCLluochen/vue@4b7bfe1 · GitHub
[go: up one dir, main page]
Skip to content

Commit 4b7bfe1

Browse files
yyx990803yyx990803
committed
handle fallback content for slot content with v-if (close vuejs#2144)
1 parent c376092 commit 4b7bfe1

File tree

2 files changed

+43
-9
lines changed

2 files changed

+43
-9
lines changed

‎src/directives/element/slot.js

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,20 @@ export const slot = {
6262

6363
compile (content, context, host) {
6464
if (content && context) {
65-
var scope = host
65+
if (
66+
this.el.hasChildNodes() &&
67+
content.childNodes.length === 1 &&
68+
content.childNodes[0].nodeType === 1 &&
69+
content.childNodes[0].hasAttribute('v-if')
70+
) {
71+
// if the inserted slot has v-if
72+
// inject fallback content as the v-else
73+
const elseBlock = document.createElement('template')
74+
elseBlock.setAttribute('v-else', '')
75+
elseBlock.innerHTML = this.el.innerHTML
76+
content.appendChild(elseBlock)
77+
}
78+
const scope = host
6679
? host._scope
6780
: this._scope
6881
this.unlink = context.$compile(

‎test/unit/specs/directives/element/slot_spec.js

Lines changed: 29 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
var Vue = require('src')
2-
var _ = require('src/util')
2+
var nextTick = Vue.nextTick
33

44
describe('Slot Distribution', function () {
55

@@ -158,7 +158,7 @@ describe('Slot Distribution', function () {
158158
})
159159
expect(el.innerHTML).toBe('<test>hello</test>')
160160
vm.msg = 'what'
161-
_.nextTick(function () {
161+
nextTick(function () {
162162
expect(el.innerHTML).toBe('<test>what</test>')
163163
done()
164164
})
@@ -182,14 +182,14 @@ describe('Slot Distribution', function () {
182182
})
183183
expect(el.textContent).toBe('12')
184184
vm.a = 2
185-
_.nextTick(function () {
185+
nextTick(function () {
186186
expect(el.textContent).toBe('22')
187187
vm.show = false
188-
_.nextTick(function () {
188+
nextTick(function () {
189189
expect(el.textContent).toBe('')
190190
vm.show = true
191191
vm.a = 3
192-
_.nextTick(function () {
192+
nextTick(function () {
193193
8000 expect(el.textContent).toBe('32')
194194
done()
195195
})
@@ -237,7 +237,7 @@ describe('Slot Distribution', function () {
237237
markup = vm.list.map(function (item) {
238238
return '<div class="child parent">' + item.a + ' ho</div>'
239239
}).join('')
240-
_.nextTick(function () {
240+
nextTick(function () {
241241
expect(el.innerHTML).toBe(markup)
242242
done()
243243
})
@@ -266,7 +266,7 @@ describe('Slot Distribution', function () {
266266
'</testb></testa>'
267267
)
268268
vm.list.push(3)
269-
_.nextTick(function () {
269+
nextTick(function () {
270270
expect(el.innerHTML).toBe(
271271
'<testa><testb>' +
272272
'<div>1</div><div>2</div><div>3</div>' +
@@ -297,7 +297,7 @@ describe('Slot Distribution', function () {
297297
})
298298
expect(el.innerHTML).toBe('<testa></testa>')
299299
vm.ok = true
300-
_.nextTick(function () {
300+
nextTick(function () {
301301
expect(el.innerHTML).toBe('<testa><testb>hello</testb></testa>')
302302
done()
303303
})
@@ -397,4 +397,25 @@ describe('Slot Distribution', function () {
397397
expect(el.textContent).toBe('hihihi')
398398
})
399399

400+
it('fallback for slot with v-if', function (done) {
401+
var vm = new Vue({
402+
el: el,
403+
data: {
404+
ok: false
405+
},
406+
template: '<div><comp><div v-if="ok">inserted</div></comp></div>',
407+
components: {
408+
comp: {
409+
template: '<div><slot>fallback</slot></div>'
410+
}
411+
}
412+
})
413+
expect(el.textContent).toBe('fallback')
414+
vm.ok = true
415+
nextTick(function () {
416+
expect(el.textContent).toBe('inserted')
417+
done()
418+
})
419+
})
420+
400421
})

0 commit comments

Comments
 (0)
0