fix(compiler/v-on): handle multiple statements in v-on handler (close #572)

packages/compiler-core/src/transforms/transformExpression.ts

@@ -76,7 +76,9 @@ export function processExpression(
   context: TransformContext,
   // some expressions like v-slot props & v-for aliases should be parsed as
   // function params
-  asParams: boolean = false
+  asParams = false,
+  // v-on handler values may contain multiple statements
+  asRawStatements = false
 ): ExpressionNode {
   if (!context.prefixIdentifiers || !node.content.trim()) {
     return node
@@ -100,9 +102,14 @@ export function processExpression(
   }
 
   let ast: any
-  // if the expression is supposed to be used in a function params position
-  // we need to parse it differently.
-  const source = `(${rawExp})${asParams ? `=>{}` : ``}`
+  // exp needs to be parsed differently:
+  // 1. Multiple inline statements (v-on, with presence of `;`): parse as raw
+  //    exp, but make sure to pad with spaces for consistent ranges
+  // 2. Expressions: wrap with parens (for e.g. object expressions)
+  // 3. Function arguments (v-for, v-slot): place in a function argument position
+  const source = asRawStatements
+    ? ` ${rawExp} `
+    : `(${rawExp})${asParams ? `=>{}` : ``}`
   try {
     ast = parseJS(source, { ranges: true })
   } catch (e) {

packages/compiler-core/src/transforms/vOn.ts

@@ -59,11 +59,12 @@ export const transformOn: DirectiveTransform = (
   if (exp) {
     const isMemberExp = isMemberExpression(exp.content)
     const isInlineStatement = !(isMemberExp || fnExpRE.test(exp.content))
+    const hasMultipleStatements = exp.content.includes(`;`)
 
     // process the expression since it's been skipped
     if (!__BROWSER__ && context.prefixIdentifiers) {
       context.addIdentifiers(`$event`)
-      exp = processExpression(exp, context)
+      exp = processExpression(exp, context, false, hasMultipleStatements)
       context.removeIdentifiers(`$event`)
       // with scope analysis, the function is hoistable if it has no reference
       // to scope variables.
@@ -85,9 +86,9 @@ export const transformOn: DirectiveTransform = (
     if (isInlineStatement || (isCacheable && isMemberExp)) {
       // wrap inline statement in a function expression
       exp = createCompoundExpression([
-        `$event => (`,
+        `$event => ${hasMultipleStatements ? `{` : `(`}`,
         ...(exp.type === NodeTypes.SIMPLE_EXPRESSION ? [exp] : exp.children),
-        `)`
+        hasMultipleStatements ? `}` : `)`
       ])
     }
   }