Skip to content

Commit

Permalink
fix: scoped slots should update when inside v-for
Browse files Browse the repository at this point in the history
  • Loading branch information
yyx990803 authored and Lostlover committed Dec 10, 2019
1 parent e4d4747 commit 16e961a
Show file tree
Hide file tree
Showing 2 changed files with 35 additions and 3 deletions.
12 changes: 9 additions & 3 deletions src/compiler/codegen/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -375,12 +375,18 @@ function genScopedSlots (
containsSlotChild(slot) // is passing down slot from parent which may be dynamic
)
})
// OR when it is inside another scoped slot (the reactivity is disconnected)
// #9438
// OR when it is inside another scoped slot or v-for (the reactivity may be
// disconnected due to the intermediate scope variable)
// #9438, #9506
// TODO: this can be further optimized by properly analyzing in-scope bindings
// and skip force updating ones that do not actually use scope variables.
if (!needsForceUpdate) {
let parent = el.parent
while (parent) {
if (parent.slotScope && parent.slotScope !== emptySlotScopeToken) {
if (
(parent.slotScope && parent.slotScope !== emptySlotScopeToken) ||
parent.for
) {
needsForceUpdate = true
break
}
Expand Down
26 changes: 26 additions & 0 deletions test/unit/features/component/component-scoped-slot.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -1171,4 +1171,30 @@ describe('Component scoped slot', () => {
expect(vm.$el.textContent).toBe('bar')
}).then(done)
})

it('should not skip updates for v-slot inside v-for', done => {
const test = {
template: `<div><slot></slot></div>`
}

const vm = new Vue({
template: `
<div>
<div v-for="i in numbers">
<test v-slot>{{ i }}</test>
</div>
</div>
`,
components: { test },
data: {
numbers: [1]
}
}).$mount()

expect(vm.$el.textContent).toBe(`1`)
vm.numbers = [2]
waitForUpdate(() => {
expect(vm.$el.textContent).toBe(`2`)
}).then(done)
})
})

0 comments on commit 16e961a

Please sign in to comment.