Binding custom event with Vue 2 and JSX

Question

I want to bind custom event on root tag instead of binding it in mounted(). So I try the following code:

render (h) {
  return (
    <div on-custom-event={this.handleCustomEvent}></div>
  )
}

But when I run it with Chrome, I found that custom-event was bound to DOM which cannot be fired using $emit, but with VueJS 2's template syntax it is easy to do:

<template>
   <div @custom-event="handleCustomEvent"></div>
</template>

Please help me on this problem, thanks!

Answer 1

A little bit late for the party but...

To trigger the event you need to something like:

protected render(h: any) {
    return (
        <a onClick={(e: any) => this.$emit('test')}>
            {this.$slots.default}
        </a>
    );
}

To listen to the event:

protected render(h: any) {
    return (
        <NavLink onTest={() => alert('clicked')}>
            <i class='fa fa-bars'></i>
        </NavLink>
    );
}

Answer 2

According to example in the docs, the JSX event handler should be camel-case, not kebab-case, so try something like:

render (h) {
  return (
    <div onCustomEvent={this.handleCustomEvent}></div>,
  )
}

Answer 3

Suppose your custom event is custom-event. Try either one of the following:

• onCustom-event
• on-custom-event

I found them here: https://github.com/vuejs/babel-plugin-transform-vue-jsx/issues/164