Skip to content

Conversation

@CntChen
Copy link

@CntChen CntChen commented Jan 21, 2020

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant