diff --git a/packages/runtime-core/__tests__/rendererAttrsFallthrough.spec.ts b/packages/runtime-core/__tests__/rendererAttrsFallthrough.spec.ts index 9e7b498b..59da8397 100644 --- a/packages/runtime-core/__tests__/rendererAttrsFallthrough.spec.ts +++ b/packages/runtime-core/__tests__/rendererAttrsFallthrough.spec.ts @@ -32,7 +32,8 @@ describe('attribute fallthrough', () => { id: 'test', class: 'c' + count.value, style: { color: count.value ? 'red' : 'green' }, - onClick: inc + onClick: inc, + 'data-id': 1 }) } } @@ -66,6 +67,7 @@ describe('attribute fallthrough', () => { expect(node.getAttribute('class')).toBe('c2 c0') expect(node.style.color).toBe('green') expect(node.style.fontWeight).toBe('bold') + expect(node.dataset.id).toBe('1') node.dispatchEvent(new CustomEvent('click')) expect(click).toHaveBeenCalled() diff --git a/packages/runtime-core/src/componentProps.ts b/packages/runtime-core/src/componentProps.ts index 54d67ed4..a0acd982 100644 --- a/packages/runtime-core/src/componentProps.ts +++ b/packages/runtime-core/src/componentProps.ts @@ -127,13 +127,17 @@ export function resolveProps( if (key === 'key' || key === 'ref') continue // prop option names are camelized during normalization, so to support // kebab -> camel conversion here we need to camelize the key. - const camelKey = camelize(key) - if (hasDeclaredProps && !hasOwn(options, camelKey)) { - // Any non-declared props are put into a separate `attrs` object - // for spreading. Make sure to preserve original key casing - ;(attrs || (attrs = {}))[key] = rawProps[key] + if (hasDeclaredProps) { + const camelKey = camelize(key) + if (hasOwn(options, camelKey)) { + setProp(camelKey, rawProps[key]) + } else { + // Any non-declared props are put into a separate `attrs` object + // for spreading. Make sure to preserve original key casing + ;(attrs || (attrs = {}))[key] = rawProps[key] + } } else { - setProp(camelKey, rawProps[key]) + setProp(key, rawProps[key]) } } }