diff --git a/packages/runtime-core/__tests__/rendererTemplateRef.spec.ts b/packages/runtime-core/__tests__/rendererTemplateRef.spec.ts index 6a03e7a8eb5..668391c9185 100644 --- a/packages/runtime-core/__tests__/rendererTemplateRef.spec.ts +++ b/packages/runtime-core/__tests__/rendererTemplateRef.spec.ts @@ -493,4 +493,50 @@ describe('api: template refs', () => { await nextTick() expect(mapRefs()).toMatchObject(['2', '3', '4']) }) + + // #6697 v-for ref behaves differently under production and development + test('named ref in v-for , should be responsive when rendering', async () => { + const list = ref([1, 2, 3]) + const listRefs = ref([]) + const App = { + setup() { + return { listRefs } + }, + render() { + return h('div', null, [ + h('div', null, String(listRefs.value)), + h( + 'ul', + list.value.map(i => + h( + 'li', + { + ref: 'listRefs', + ref_for: true + }, + i + ) + ) + ) + ]) + } + } + const root = nodeOps.createElement('div') + render(h(App), root) + + await nextTick() + expect(String(listRefs.value)).toBe( + '[object Object],[object Object],[object Object]' + ) + expect(serializeInner(root)).toBe( + '
[object Object],[object Object],[object Object]
' + ) + + list.value.splice(0, 1) + await nextTick() + expect(String(listRefs.value)).toBe('[object Object],[object Object]') + expect(serializeInner(root)).toBe( + '
[object Object],[object Object]
' + ) + }) }) diff --git a/packages/runtime-core/src/rendererTemplateRef.ts b/packages/runtime-core/src/rendererTemplateRef.ts index 1fe432d5019..30f96228d1f 100644 --- a/packages/runtime-core/src/rendererTemplateRef.ts +++ b/packages/runtime-core/src/rendererTemplateRef.ts @@ -84,7 +84,11 @@ export function setRef( if (_isString || _isRef) { const doSet = () => { if (rawRef.f) { - const existing = _isString ? refs[ref] : ref.value + const existing = _isString + ? hasOwn(setupState, ref) + ? setupState[ref] + : refs[ref] + : ref.value if (isUnmount) { isArray(existing) && remove(existing, refValue) } else {