Vue.js/JSX: Dynamic event name

Question

I am writing a Vue.js component. The component renders an <input> element. An event listener is listening to either change or input event, according to the value of a prop.

How to write the render function with JSX?

{
  props: {
    lazy: Boolean,
  },
  render(h) {
    const bindEvent = this.lazy? 'change' : 'input'
    return h('input', {
      attrs: {
        type: 'text',
      },
      on: {
        [bindEvent]: e => this.$emit('update', e.target.value)
      },
    })
  },
}

I want to write something like this:

render(h) {
  const bindEvent = this.lazy? 'change' : 'input'
  return <input
    type='text'
    on={{ [bindEvent]: e => this.$emit('update', e.target.value) }}
  />
}

Nathan Xabedi · Accepted Answer · 2019-02-20 18:40:36Z

4

Solution 1: Adding event listener to each event

render(h) {
  const eventHandler = name =>
    (this.bindEvent === name)? e => this.$emit('update', e.target.value)
    : () => {}
  return <input
    type='text'
    onChange={eventHandler('change')}
    onInput={eventHandler('input')}
  />
}

Solution 2: Adding event listener to VNode

render(h) {
  const eventHandler = name =>
    (this.bindEvent === name)? e => this.$emit('update', e.target.value)
    : () => {}
  const vNode= <input type='text' />
  vNode.data.on = { [this.bindEvent]: e => this.$emit('update', e.target.value) }
  return vNode
}

edited Feb 20, 2019 at 18:40

answered Jan 12, 2019 at 12:28

Nathan Xabedi

1,1271 gold badge11 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ana Liza Pandac · Accepted Answer · 2019-01-09 20:20:57Z

0

You're almost there. Just a little tweak, like this.

<input
  type="text"
  v-on="{ [bindEvent]: e => this.$emit('update', e.target.value) }"
/>

See working implementation.

answered Jan 9, 2019 at 20:20

Ana Liza Pandac

4,8912 gold badges26 silver badges37 bronze badges

1 Comment

Nathan Xabedi Over a year ago

Sure, that works for templates but not for JSX in render function. It compiles to "directives": [{ name: "on", value: { [this.bindEvent]: e => { this.bindValue(e.target.value); } } }]. And the console: [Vue warn]: Failed to resolve directive: on

Collectives™ on Stack Overflow

Vue.js/JSX: Dynamic event name

2 Answers 2

Solution 1: Adding event listener to each event

Solution 2: Adding event listener to VNode

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Solution 1: Adding event listener to each event

Solution 2: Adding event listener to VNode

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related