Skip to content

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

Closed
@decademoon

Description

@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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    🐞 bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions