root
/
vue3-core
mirror of https://github.com/vuejs/core.git
1
0
Fork 0
Code Issues Actions 6 Packages Projects Releases Wiki Activity

fix(runtime-core): fix error when using cssvars with disabled teleport (#7341) 

close #7342
This commit is contained in:
白雾三语 2023-10-20 16:34:11 +08:00 committed by GitHub
parent 75b8722135
commit 8f0472c9ab
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 19 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/runtime-core/src/components/Teleport.ts
View File

@ -414,7 +414,7 @@ function updateCssVars(vnode: VNode) {
const ctx = vnode.ctx const ctx = vnode.ctx
if (ctx && ctx.ut) { if (ctx && ctx.ut) {
let node = (vnode.children as VNode[])[0].el! let node = (vnode.children as VNode[])[0].el!
while (node !== vnode.targetAnchor) { while (node && node !== vnode.targetAnchor) {
if (node.nodeType === 1) node.setAttribute('data-v-owner', ctx.uid) if (node.nodeType === 1) node.setAttribute('data-v-owner', ctx.uid)
node = node.nextSibling node = node.nextSibling
} }

18
packages/runtime-dom/__tests__/helpers/useCssVars.spec.ts
View File

@ -275,4 +275,22 @@ describe('useCssVars', () => {
expect((c as HTMLElement).style.getPropertyValue(`--color`)).toBe('red') expect((c as HTMLElement).style.getPropertyValue(`--color`)).toBe('red')
} }
}) })
test('with teleport(disabled)', async () => {
document.body.innerHTML = ''
const state = reactive({ color: 'red' })
const root = document.createElement('div')
const target = document.body
const App = {
setup() {
useCssVars(() => state)
return () => [h(Teleport, { to: target, disabled: true }, [h('div')])]
}
}
expect(() => render(h(App), root)).not.toThrow(TypeError)
await nextTick()
expect(target.children.length).toBe(0)
})
}) })