from trame.app import get_server
from trame_client.widgets import html
from trame_client.ui.html import DivLayout
server = get_server(client_type="vue3")
state, ctrl = server.state, server.controller
with DivLayout(server) as layout:
Button("Exec", click="console.log(\"test\");", classes="alertMsg")
server.start()This code is failing, because the generated Vue template for the button is invalid:
<button class="alertMsg" @click="console.log("test");">
The callback contains double quotes, and is interpolated within a double-quoted string. The Javascript console error message is cryptic to the non-initiated Uncaught (in promise) SyntaxError: 17.
This is also a problem for the JSEval exec function, that also uses VueJS events to execute code on the client.
There are multiple ways to prevent this error, including escaping quotes as HTML console.log("test");. I suggest we perform this escaping in the AbstractElement.events function, or at least warn the user and prevent generating invalid template code.
This code is failing, because the generated Vue template for the button is invalid:
The callback contains double quotes, and is interpolated within a double-quoted string. The Javascript console error message is cryptic to the non-initiated
Uncaught (in promise) SyntaxError: 17.This is also a problem for the JSEval exec function, that also uses VueJS events to execute code on the client.
There are multiple ways to prevent this error, including escaping quotes as HTML
console.log("test");. I suggest we perform this escaping in theAbstractElement.eventsfunction, or at least warn the user and prevent generating invalid template code.