Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(runtime-core):v-for ref behaves differently under prod and dev #6697 #6714

Merged
merged 9 commits into from Oct 14, 2022
46 changes: 46 additions & 0 deletions packages/runtime-core/__tests__/rendererTemplateRef.spec.ts
Expand Up @@ -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(
'<div><div>[object Object],[object Object],[object Object]</div><ul><li>1</li><li>2</li><li>3</li></ul></div>'
)

list.value.splice(0, 1)
await nextTick()
expect(String(listRefs.value)).toBe('[object Object],[object Object]')
expect(serializeInner(root)).toBe(
'<div><div>[object Object],[object Object]</div><ul><li>2</li><li>3</li></ul></div>'
)
})
})
6 changes: 5 additions & 1 deletion packages/runtime-core/src/rendererTemplateRef.ts
Expand Up @@ -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 {
Expand Down