Vue jsx event handlers

Question

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>
    )
  }

score 1 · Answer 1 · answered Jan 20 '20 at 07:00

In React jsx, element event binding use camel case: onClick or onMouseDown.

But in html Specification, event binding is full lower case: onclick or onmousedown.

So React babel plugin transfrom camel case to lower case.

In Vue, vue jsx plugin which transform jsx to vue render funciton, do noting about lower case.

enter image description here

score 0 · Accepted Answer · answered Nov 21 '18 at 14:21

0

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.

answered Nov 21 '18 at 14:21

Maksim Nesterenko

5,661
11
57
91

Vue jsx event handlers

2 Answers2