How to emit event from JSX functional component in Vuejs

Question

Im new to the community and VueJs so please have mercy :) If the answer to the question is obvious, and thanks for your effort up-front, I really appreciate it!

I have this component:

<script>
    export default {
      name: 'InputElement',
      functional: true,
      render(createElement, context) {
        const { validation, name, field } = context.props || {}
        const { listeners } = context
        // debugger
        return (
          <input id={name}
            v-validate={validation}
            type={field.type}
            placeholder={field.placeholder}
            name={name}
            onInput={ listeners.event_is_nice('sadf')}
            class="e-form__input"/>
        )
      }
    }
</script>

as you can see it's not standard VueJs syntax, I am trying to return the input element and onInput I am trying to emit "event_is_nice" event.

When I try this, I get: "listeners.event_is_nice" is not a function (I guess its not registered).

When I use createElement (standard JSX Vue syntax) or I Use then it works, but I just have no luck figuring this method out..'/

@roliroli Thanks dude, I already saw this thread but my question is regarding the different syntax than the answer from the thread you posted. In your example you return create element() method, but i want to return the actual element with emiter attached to it. like in example I posted above — Ilija Sasic
– Ilija Sasic, Commented Jul 15, 2019 at 7:55

Roland · Accepted Answer · 2019-07-15 08:27:36Z

2

A solution would be:

export default {
  name: 'InputElement',
  functional: true,
  render(createElement, context) {
    const { validation, name, field } = context.props || {}
    const { listeners } = context
    let emitEvent = listeners['event_is_nice'] //ADDED
    // debugger
    return (
      <input id={name}
        v-validate={validation}
        type={field.type}
        placeholder={field.placeholder}
        name={name}
        onInput={ () => emitEvent("sadf")} // MODIFIED
        class="e-form__input"/>
    )
  }
}

So in your code I added: let emitEvent = listeners['event_is_nice']

and on input handler onInput={ () => emitEvent("sadf")}

edited Jul 15, 2019 at 8:27

answered Jul 15, 2019 at 8:11

Roland

28.1k9 gold badges108 silver badges103 bronze badges

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

1 Comment

Ilija Sasic Over a year ago

Thanks, man I really appreciate this, To be honest I already tried this, and it didn't work, because (i forgot to mention and probably should have), The parent to this component is actually a functional wrapper component which is used for factoring the proper field type based on configuration. I will post the whole problem below.

Ilija Sasic · Accepted Answer · 2019-07-15 09:10:58Z

So The answer from roli roli is working, I tried in the sendbox, Which led me to realize that I didn't address the problem well.

This functional component is wrapped in parent "factory" component, which looks like this:

<script>
import BaseLabel from './elements/BaseLabel'
import BaseInput from './elements/BaseInput'
import BaseMessage from './elements/BaseMessage'

export default {
  functional: true,
  components: {
    BaseInput,
    BaseLabel,
    BaseMessage
  },
  props: {
    field: {
      type: Object,
      default: () => {}
    },
    validation: {
      type: String
    },
    name: {
      type: String
    },
    errorMsg: {
      type: String
    }
  },

  render(createElement, { props, listeners }) {
    function appropriateElementComponent() {
      switch (props.field.type) {
        case 'checkbox':
          return BaseInput // TODO: Replace with Base Checkbox
        default:
          return BaseInput
      }
    }
    const label = createElement(BaseLabel, { props })
    const input = createElement(appropriateElementComponent(), { props })
    const message = createElement(BaseMessage, { props })
    // debugger
    return [label, input, message]
  }
}
</script>

So The parent wrapper component is the one which is not really receiving and passing up the event to the parent component...

Collectives™ on Stack Overflow

How to emit event from JSX functional component in Vuejs

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related