diff --git a/packages/runtime-core/__tests__/rendererTemplateRef.spec.ts b/packages/runtime-core/__tests__/rendererTemplateRef.spec.ts index 198687c0..4aad6f7e 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 249fb9e5..740624c9 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