diff --git a/packages/runtime-core/__tests__/helpers/useId.spec.ts b/packages/runtime-core/__tests__/helpers/useId.spec.ts
index 564755e2fd8..d71260cdaff 100644
--- a/packages/runtime-core/__tests__/helpers/useId.spec.ts
+++ b/packages/runtime-core/__tests__/helpers/useId.spec.ts
@@ -59,7 +59,7 @@ describe('useId', () => {
const app = createApp(BasicComponentWithUseId)
return [app, []]
}),
- ).toBe('v:0 v:1')
+ ).toBe('v-0 v-1')
})
test('with config.idPrefix', async () => {
@@ -69,7 +69,7 @@ describe('useId', () => {
app.config.idPrefix = 'foo'
return [app, []]
}),
- ).toBe('foo:0 foo:1')
+ ).toBe('foo-0 foo-1')
})
test('async component', async () => {
@@ -92,9 +92,9 @@ describe('useId', () => {
}
const expected =
- 'v:0 v:1 ' + // root
- 'v:0-0 v:0-1 ' + // inside first async subtree
- 'v:1-0 v:1-1' // inside second async subtree
+ 'v-0 v-1 ' + // root
+ 'v-0-0 v-0-1 ' + // inside first async subtree
+ 'v-1-0 v-1-1' // inside second async subtree
// assert different async resolution order does not affect id stable-ness
expect(await getOutput(() => factory(0, 16))).toBe(expected)
expect(await getOutput(() => factory(16, 0))).toBe(expected)
@@ -137,9 +137,9 @@ describe('useId', () => {
}
const expected =
- 'v:0 v:1 ' + // root
- 'v:0-0 v:0-1 ' + // inside first async subtree
- 'v:1-0 v:1-1' // inside second async subtree
+ 'v-0 v-1 ' + // root
+ 'v-0-0 v-0-1 ' + // inside first async subtree
+ 'v-1-0 v-1-1' // inside second async subtree
// assert different async resolution order does not affect id stable-ness
expect(await getOutput(() => factory(0, 16))).toBe(expected)
expect(await getOutput(() => factory(16, 0))).toBe(expected)
@@ -188,9 +188,9 @@ describe('useId', () => {
const expected =
'
' +
- 'v:0 v:1 ' + // root
- 'v:0-0 v:0-1 ' + // inside first async subtree
- 'v:1-0 v:1-1' + // inside second async subtree
+ 'v-0 v-1 ' + // root
+ 'v-0-0 v-0-1 ' + // inside first async subtree
+ 'v-1-0 v-1-1' + // inside second async subtree
'
'
// assert different async resolution order does not affect id stable-ness
expect(await getOutput(() => factory(0, 16))).toBe(expected)
@@ -232,10 +232,10 @@ describe('useId', () => {
}
const expected =
- 'v:0 ' + // One
- 'v:0-0 ' + // Two
- 'v:0-0-0 v:0-0-1 ' + // Three + Three nested in Two
- 'v:0-1' // Three after Two
+ 'v-0 ' + // One
+ 'v-0-0 ' + // Two
+ 'v-0-0-0 v-0-0-1 ' + // Three + Three nested in Two
+ 'v-0-1' // Three after Two
// assert different async resolution order does not affect id stable-ness
expect(await getOutput(() => factory())).toBe(expected)
expect(await getOutput(() => factory())).toBe(expected)
@@ -278,8 +278,8 @@ describe('useId', () => {
const expected =
'' +
- 'v:0 v:1 ' + // root
- 'v:0-0-0 v:0-0-1' + // async component inside async setup
+ 'v-0 v-1 ' + // root
+ 'v-0-0-0 v-0-0-1' + // async component inside async setup
'
'
// assert different async resolution order does not affect id stable-ness
expect(await getOutput(async () => factory(0, 16))).toBe(expected)
diff --git a/packages/runtime-core/src/helpers/useId.ts b/packages/runtime-core/src/helpers/useId.ts
index f4a199e2c39..f7a2b5fc330 100644
--- a/packages/runtime-core/src/helpers/useId.ts
+++ b/packages/runtime-core/src/helpers/useId.ts
@@ -7,7 +7,7 @@ import { warn } from '../warning'
export function useId(): string | undefined {
const i = getCurrentInstance()
if (i) {
- return (i.appContext.config.idPrefix || 'v') + ':' + i.ids[0] + i.ids[1]++
+ return (i.appContext.config.idPrefix || 'v') + '-' + i.ids[0] + i.ids[1]++
} else if (__DEV__) {
warn(
`useId() is called when there is no active component ` +