jsx-vue2 icon indicating copy to clipboard operation
jsx-vue2 copied to clipboard

fix: add support for jsx camel case event binding

Open CntChen opened this issue 4 years ago • 0 comments

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.

CntChen avatar Jan 21 '20 13:01 CntChen