From cee1eafb4d2d5df901c9536ac59c321be72598b5 Mon Sep 17 00:00:00 2001 From: lidlanca <8693091+lidlanca@users.noreply.github.com> Date: Tue, 12 Apr 2022 03:28:40 -0400 Subject: [PATCH] fix(runtime-core/template-ref): named ref in v-for regression fix (#5118) close #5116 close #5447 close #5525 --- .../__tests__/rendererTemplateRef.spec.ts | 55 +++++++++++++++++++ .../runtime-core/src/rendererTemplateRef.ts | 3 + 2 files changed, 58 insertions(+) diff --git a/packages/runtime-core/__tests__/rendererTemplateRef.spec.ts b/packages/runtime-core/__tests__/rendererTemplateRef.spec.ts index 198687c06db..4aad6f7edbc 100644 --- a/packages/runtime-core/__tests__/rendererTemplateRef.spec.ts +++ b/packages/runtime-core/__tests__/rendererTemplateRef.spec.ts @@ -442,4 +442,59 @@ describe('api: template refs', () => { await nextTick() expect(mapRefs()).toMatchObject(['2', '3', '4']) }) + + + + test('named ref in v-for', async () => { + const show = ref(true); + const list = reactive([1, 2, 3]) + const listRefs = ref([]) + const mapRefs = () => listRefs.value.map(n => serializeInner(n)) + + const App = { + setup() { + return { listRefs } + }, + render() { + return show.value + ? h( + 'ul', + list.map(i => + h( + 'li', + { + ref: 'listRefs', + ref_for: true + }, + i + ) + ) + ) + : null + } + } + const root = nodeOps.createElement('div') + render(h(App), root) + + expect(mapRefs()).toMatchObject(['1', '2', '3']) + + list.push(4) + await nextTick() + expect(mapRefs()).toMatchObject(['1', '2', '3', '4']) + + list.shift() + await nextTick() + expect(mapRefs()).toMatchObject(['2', '3', '4']) + + show.value = !show.value + await nextTick() + + expect(mapRefs()).toMatchObject([]) + + show.value = !show.value + await nextTick() + expect(mapRefs()).toMatchObject(['2', '3', '4']) + }) + + }) diff --git a/packages/runtime-core/src/rendererTemplateRef.ts b/packages/runtime-core/src/rendererTemplateRef.ts index 249fb9e55e9..740624c917e 100644 --- a/packages/runtime-core/src/rendererTemplateRef.ts +++ b/packages/runtime-core/src/rendererTemplateRef.ts @@ -91,6 +91,9 @@ export function setRef( if (!isArray(existing)) { if (_isString) { refs[ref] = [refValue] + if (hasOwn(setupState, ref)) { + setupState[ref] = refs[ref] + } } else { ref.value = [refValue] if (rawRef.k) refs[rawRef.k] = ref.value