jsx-vue2
jsx-vue2 copied to clipboard
fix: add support for jsx camel case event binding
Why
In jsx, event binding use Camel case, such as onClick
, onMouseDown
.
In HTML Specification, event binding is all lower case, such as onclick
, onmousedown
.
So for on
and nativeOn
attribute in jsx, transform name
to all lower case.
Before fix
source code:
<div onMouseDown={() => {}}></div>
transform to:
render: function render() {
var h = arguments[0];
return h("div", {
"on": {
"mouseDown": function() {}
},
}
}, []);
}
This will render to onmouseDown
event to div
, not onmousedown
.
After fix
<div onMouseDown={() => {}}></div>
transform to:
render: function render() {
var h = arguments[0];
return h("div", {
"on": {
"mousedown": function() {}
},
}
}, []);
}
Topic on Stackoverflow: Vue jsx event handlers.