Vue.js / JSX: динамическое имя события

Question

Vue.js / JSX: динамическое имя события

1

Я пишу компонент Vue.js. Компонент отображает элемент <input>. Слушатель событий прослушивает либо change либо input события, в соответствии со значением проп.

Как написать функцию рендеринга с 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)
      },
    })
  },
}

Я хочу написать что-то вроде этого:

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

Nathan Xabedi 09 янв. 2019, в 18:34

Источник

Теги:

javascript

vue.js

2 ответа

0

Ты почти там. Просто немного подправить, вот так.

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

Смотрите рабочую реализацию.

Ana Liza Pandac 09 янв. 2019, в 18:02

0

Конечно, это работает для шаблонов, но не для JSX в функции рендеринга. Он компилируется в "directives": [{ name: "on", value: { [this.bindEvent]: e => { this.bindValue(e.target.value); } } }] . И консоль: [Vue warn]: Failed to resolve directive: on
Nathan Xabedi 12 янв. 2019, в 12:01

Ещё вопросы

Конечно, это работает для шаблонов, но не для JSX в функции рендеринга. Он компилируется в "directives": [{ name: "on", value: { [this.bindEvent]: e => { this.bindValue(e.target.value); } } }] . И консоль: [Vue warn]: Failed to resolve directive: on

Nathan Xabedi · Accepted Answer · 2019-01-12T09-33-00.000Z

Решение 1. Добавление слушателя события к каждому событию

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

Решение 2. Добавление прослушивателя событий в VNode

render() {
  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
}