diff --git a/packages/compiler-vapor/__tests__/transforms/__snapshots__/vOn.spec.ts.snap b/packages/compiler-vapor/__tests__/transforms/__snapshots__/vOn.spec.ts.snap
index 8423cb2ed55..52c47030a80 100644
--- a/packages/compiler-vapor/__tests__/transforms/__snapshots__/vOn.spec.ts.snap
+++ b/packages/compiler-vapor/__tests__/transforms/__snapshots__/vOn.spec.ts.snap
@@ -145,7 +145,7 @@ _delegateEvents("click")
export function render(_ctx, $props, $emit, $attrs, $slots) {
const n0 = t0()
- n0.$evtclick = e => _ctx.handleClick(e)
+ n0.$evtclick = e => (_ctx.foo[_ctx.handleClick] as any)(e)
return n0
}"
`;
diff --git a/packages/compiler-vapor/__tests__/transforms/vOn.spec.ts b/packages/compiler-vapor/__tests__/transforms/vOn.spec.ts
index 414ea0e298b..3402f577f06 100644
--- a/packages/compiler-vapor/__tests__/transforms/vOn.spec.ts
+++ b/packages/compiler-vapor/__tests__/transforms/vOn.spec.ts
@@ -685,7 +685,7 @@ describe('v-on', () => {
test('expression with type', () => {
const { code } = compileWithVOn(
- `
handleClick as any)">
`,
+ ``,
{
bindingMetadata: {
handleClick: BindingTypes.SETUP_CONST,
@@ -693,7 +693,9 @@ describe('v-on', () => {
},
)
expect(code).matchSnapshot()
- expect(code).include('n0.$evtclick = e => _ctx.handleClick(e)')
+ expect(code).include(
+ 'n0.$evtclick = e => (_ctx.foo[_ctx.handleClick] as any)(e)',
+ )
})
test('component event with special characters', () => {
diff --git a/packages/compiler-vapor/src/generators/event.ts b/packages/compiler-vapor/src/generators/event.ts
index cfb47b61184..076d9435706 100644
--- a/packages/compiler-vapor/src/generators/event.ts
+++ b/packages/compiler-vapor/src/generators/event.ts
@@ -1,6 +1,7 @@
import {
BindingTypes,
type SimpleExpressionNode,
+ TS_NODE_TYPES,
isFnExpression,
isMemberExpression,
} from '@vue/compiler-dom'
@@ -126,7 +127,14 @@ export function genEventHandler(
// non constant, wrap with invocation as `e => foo.bar(e)`
// when passing as component handler, access is always dynamic so we
// can skip this
- handlerExp = [`e => `, ...handlerExp, `(e)`]
+ const isTSNode = value.ast && TS_NODE_TYPES.includes(value.ast.type)
+ handlerExp = [
+ `e => `,
+ isTSNode ? '(' : '',
+ ...handlerExp,
+ isTSNode ? ')' : '',
+ `(e)`,
+ ]
}
} else if (isFnExpression(value, context.options)) {
// Fn expression: @click="e => foo(e)"
diff --git a/packages/compiler-vapor/src/generators/expression.ts b/packages/compiler-vapor/src/generators/expression.ts
index c70d4a56613..2faaa13ff5d 100644
--- a/packages/compiler-vapor/src/generators/expression.ts
+++ b/packages/compiler-vapor/src/generators/expression.ts
@@ -10,7 +10,6 @@ import {
NewlineType,
type SimpleExpressionNode,
type SourceLocation,
- TS_NODE_TYPES,
advancePositionWithClone,
createSimpleExpression,
isInDestructureAssignment,
@@ -64,7 +63,6 @@ export function genExpression(
let hasMemberExpression = false
if (ids.length) {
const [frag, push] = buildCodeFragment()
- const isTSNode = ast && TS_NODE_TYPES.includes(ast.type)
ids
.sort((a, b) => a.start! - b.start!)
.forEach((id, i) => {
@@ -73,11 +71,8 @@ export function genExpression(
const end = id.end! - 1
const last = ids[i - 1]
- if (!(isTSNode && i === 0)) {
- const leadingText = content.slice(last ? last.end! - 1 : 0, start)
- if (leadingText.length) push([leadingText, NewlineType.Unknown])
- }
-
+ const leadingText = content.slice(last ? last.end! - 1 : 0, start)
+ if (leadingText.length) push([leadingText, NewlineType.Unknown])
const source = content.slice(start, end)
const parentStack = parentStackMap.get(id)!
const parent = parentStack[parentStack.length - 1]
@@ -103,7 +98,7 @@ export function genExpression(
),
)
- if (i === ids.length - 1 && end < content.length && !isTSNode) {
+ if (i === ids.length - 1 && end < content.length) {
push([content.slice(end), NewlineType.Unknown])
}
})