Template compiler 2.x incompatibility: multiple statements inside event handler has invalid generated code

[decademoon]

Version

3.0.0-alpha.1

Reproduction link

(None)

Steps to reproduce

Attempt to compile this template:

<button @click="foo(); bar()">Click</button>

What is expected?

It should compile without any errors or warnings and when the button is clicked it should call the foo and bar functions sequentially.

What is actually happening?

The generated code is invalid.

---

The following template fragment works in 2.x:

<button @click="foo(); bar()">Click</button>

The click event handler gets compiled into something like this:

click: $event => { foo(); bar() }

But in 3.0.0-alpha.1 the compiled code is this:

click: _cache[0] || (_cache[0] = $event => (foo(); bar()))

which is invalid JS syntax.

It can be fixed on the user's end by:

• Not having code like that in the template and if you need to execute multiple statements it should be extracted into a method.
• Using a comma instead of a semicolon.

[decademoon]

Also I want to mention that the issue helper website doesn't let you pick any version for vue-next which blocks creating any issues using the form.

[ThaDaVos]

@decademoon -> this link?
https://new-issue.vuejs.org/?repo=vuejs/vue-next
You'll have to fill in the version yourself as far as I can see

[decademoon]

@ThaDaVos It's working now.