From 73e8ec7fc750b6e89d827d9a3e03d1ef6e0bcb55 Mon Sep 17 00:00:00 2001 From: cntchen Date: Tue, 21 Jan 2020 21:03:41 +0800 Subject: [PATCH] fix: add support for jsx camel case event binding --- packages/babel-plugin-transform-vue-jsx/src/index.js | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/packages/babel-plugin-transform-vue-jsx/src/index.js b/packages/babel-plugin-transform-vue-jsx/src/index.js index e36143a..40688fb 100644 --- a/packages/babel-plugin-transform-vue-jsx/src/index.js +++ b/packages/babel-plugin-transform-vue-jsx/src/index.js @@ -166,7 +166,15 @@ const parseAttributeJSXAttribute = (t, path, attributes, tagName, elementType) = prefix = prefixes.find(el => name.startsWith(el)) || 'attrs' name = name.replace(new RegExp(`^${prefix}\-?`), '') - name = name[0].toLowerCase() + name.substr(1) + + // 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 + if (prefix === 'on' || prefix === 'nativeOn') { + name = name.toLowerCase() + } else { + name = name[0].toLowerCase() + name.substr(1) + } const valuePath = path.get('value') let value