diff --git a/packages/compiler-dom/__tests__/transforms/vOn.spec.ts b/packages/compiler-dom/__tests__/transforms/vOn.spec.ts index c730b986..775de3dc 100644 --- a/packages/compiler-dom/__tests__/transforms/vOn.spec.ts +++ b/packages/compiler-dom/__tests__/transforms/vOn.spec.ts @@ -37,13 +37,10 @@ describe('compiler-dom: transform v-on', () => { }) expect(prop).toMatchObject({ type: NodeTypes.JS_PROPERTY, - value: createObjectMatcher({ - handler: { - callee: V_ON_MODIFIERS_GUARD, - arguments: [{ content: '_ctx.test' }, '["stop","prevent"]'] - }, - persistent: { content: 'true', isStatic: false } - }) + value: { + callee: V_ON_MODIFIERS_GUARD, + arguments: [{ content: '_ctx.test' }, '["stop","prevent"]'] + } }) }) @@ -59,11 +56,11 @@ describe('compiler-dom: transform v-on', () => { callee: V_ON_MODIFIERS_GUARD, arguments: [{ content: '_ctx.test' }, '["stop"]'] }, - persistent: { content: 'true', isStatic: false }, options: createObjectMatcher({ capture: { content: 'true', isStatic: false }, passive: { content: 'true', isStatic: false } - }) + }), + persistent: { content: 'true', isStatic: false } }) }) }) @@ -86,10 +83,10 @@ describe('compiler-dom: transform v-on', () => { '["a"]' ] }, - persistent: { content: 'true', isStatic: false }, options: createObjectMatcher({ capture: { content: 'true', isStatic: false } - }) + }), + persistent: { content: 'true', isStatic: false } }) }) }) diff --git a/packages/compiler-dom/src/transforms/vOn.ts b/packages/compiler-dom/src/transforms/vOn.ts index b0838acf..10394f81 100644 --- a/packages/compiler-dom/src/transforms/vOn.ts +++ b/packages/compiler-dom/src/transforms/vOn.ts @@ -5,7 +5,9 @@ import { createCallExpression, createObjectExpression, createSimpleExpression, - NodeTypes + NodeTypes, + CallExpression, + ObjectExpression } from '@vue/compiler-core' import { V_ON_MODIFIERS_GUARD, V_ON_KEYS_GUARD } from '../runtimeHelpers' @@ -32,6 +34,7 @@ export const transformOn: DirectiveTransform = (dir, node, context) => { const { modifiers } = dir const baseResult = baseTransform(dir, node, context) if (!modifiers.length) return baseResult + const { key, value } = baseResult.props[0] const runtimeModifiers = modifiers.filter(m => !(m in EVENT_OPTION_MODIFIERS)) let handler = createCallExpression(context.helper(V_ON_MODIFIERS_GUARD), [ @@ -49,17 +52,15 @@ export const transformOn: DirectiveTransform = (dir, node, context) => { JSON.stringify(runtimeModifiers.filter(m => !(m in NOT_KEY_MODIFIERS))) ]) } - const properties = [ - createObjectProperty('handler', handler), - // so the runtime knows the options never change - createObjectProperty('persistent', createSimpleExpression('true', false)) - ] + + let returnExp: CallExpression | ObjectExpression = handler const eventOptionModifiers = modifiers.filter( modifier => modifier in EVENT_OPTION_MODIFIERS ) if (eventOptionModifiers.length) { - properties.push( + returnExp = createObjectExpression([ + createObjectProperty('handler', handler), createObjectProperty( 'options', createObjectExpression( @@ -70,12 +71,14 @@ export const transformOn: DirectiveTransform = (dir, node, context) => { ) ) ) - ) - ) + ), + // so the runtime knows the options never change + createObjectProperty('persistent', createSimpleExpression('true', false)) + ]) } return { - props: [createObjectProperty(key, createObjectExpression(properties))], + props: [createObjectProperty(key, returnExp)], needRuntime: false } }