diff --git a/src/compiler/parser/index.js b/src/compiler/parser/index.js index cdeb257eda4..dd83325ed80 100644 --- a/src/compiler/parser/index.js +++ b/src/compiler/parser/index.js @@ -698,6 +698,13 @@ function processSlotContent (el) { slotContainer.children = el.children.filter((c: any) => { if (!c.slotScope) { c.parent = slotContainer + if (c.ifConditions) { + // #10330 + // update every element's parent when it is in the other condition branch + // so we can find correctly whether the element is inside another scoped slot when + // generating scoped slot's rendering code, and this will trigger force updating + c.ifConditions.forEach(({block}) => block.parent = slotContainer) + } return true } }) diff --git a/test/unit/features/component/component-scoped-slot.spec.js b/test/unit/features/component/component-scoped-slot.spec.js index 28369814f48..7248016a91b 100644 --- a/test/unit/features/component/component-scoped-slot.spec.js +++ b/test/unit/features/component/component-scoped-slot.spec.js @@ -1325,4 +1325,39 @@ describe('Component scoped slot', () => { expect(vm.$el.textContent).toMatch(`1`) }).then(done) }) + + // #10330 + it('nested v-slot should be reactive when v-slot on component itself combined with v-if/v-else', done => { + const Container = { + template: `
`, + props: ['n'] + } + + const Nested = { + template: `
`, + props: ['m'] + } + + const vm = new Vue({ + data: { + n: { value: 0 }, + disabled: false + }, + components: { Container, Nested }, + template: ` + +
Disabled
+ + {{n.value}} {{m.value}} + +
+ ` + }).$mount() + + expect(vm.$el.textContent).toMatch(`0 0`) + vm.n.value++ + waitForUpdate(() => { + expect(vm.$el.textContent).toMatch(`1 1`) + }).then(done) + }) })