Search code examples
vue.jsvuejs2jsxdom-eventsvue-events

Vue jsx event handlers


Is there any docs section which clarifies why I should use camel case for click handler, but kebab for input (and everything else)? But not for click, for click only onClick works.

Actually I noticed that for common input both options work fine either on-input or onInput.

const MyJSXInput = {
  props: {
    value: {
      type: Boolean,
      required: true
    },
    clickHandler: {
      type: Function,
      required: true
    },
    inputHandler: {
      type: Function,
      required: true
    },
  },
  // eslint-disable-next-line no-unused-vars
  render(createElement) {
    const { value, clickHandler, inputHandler } = this.$props
    return (
      <input onClick={clickHandler} on-input={inputHandler} type="checkbox" value={value} />
    )
  }
}

Don't know if it matters, but I use this component as render function prop for another component. Like this (all simplified):

    renderProp: () => (
      <MyJSXInput 
        value={someValue}
        click-handler={this.someHandlerClick}
        input-handler={this.someHandlerInput}
      />
    )

And this final component has things like that:

  render(h) {
    return (
      <div>
        {this.$props.renderProp(this)}
      </div>
    )
  }

Solution

  • Found piece of info here:

    https://github.com/vuejs/babel-plugin-transform-vue-jsx#difference-from-react-jsx

    However I still have no idea why kebab case works for input event.