Compile error kebabcase event name

[QingWei-Li]

<compo on-event-name={ this.handlerEvent } />

console

SyntaxError: Unexpected token (68:17)

[egoist]

I can't reproduce this.

[QingWei-Li]

repo: https://github.com/QingWei-Li/vue-jsx-bug

var Compo = {
  render(h) {
    return <button on-click={ () => this.$emit('handle-event') }>click me</button>
  }
}

export default {
  components: { Compo },

  data () {
    return {
      msg: 'Hello Vue!'
    }
  },
  render(h) {
    return (
      <div id="app">
        <h1>{ this.msg }</h1>
        <Compo on-handle-event={ () => console.log(12) }></Compo>
      </div>
    )
  }
}

console

App.js Unexpected token (41:18)
You may need an appropriate loader to handle this file type.
|         {
|           on: {
|             handle-event: function handleEvent() {
|               return console.log(12);
|             }
 @ ./src/main.js 2:0-24
 @ multi main

[egoist]

JSX on-[event] only supports these events, custom events are not supported.

[QingWei-Li]

but, it's work

var Compo = {
  render(h) {
    return <button on-click={ () => this.$emit('handleevent') }>click me</button>
  }
}

export default {
  components: { Compo },

  data () {
    return {
      msg: 'Hello Vue!'
    }
  },
  render(h) {
    return (
      <div id="app">
        <h1>{ this.msg }</h1>
        <Compo on-handleevent={ () => console.log(12) }></Compo>
      </div>
    )
  }
}

[egoist]

Oops 😅, I just tested on a wrong component, just use camel case instead

[sxy1992]

ohh，I also encountered this problem, thank you for your answer

[JimmyLv]

For someone who want to listen some non-native events of component, maybe it comes from 3rd party library:

you have to use on-xxx like on-move, on-start, on-end...

<Draggable
                list={this.editors}
                onChange={this.onChange}
                on-start={this.onStart}
                on-end={this.onEnd}
                move={this.onMove}
</Draggable>