Creating a unique event binding in Vue 2 with JSX

Question

Creating a unique event binding in Vue 2 with JSX

Instead of binding a custom event in the mounted() method, I want to bind it on the root tag directly. So, I attempted the following code:

render (h) {
  return (
    <div on-custom-event={this.handleCustomEvent}></div>
  )
}

However, when testing it in Chrome, I realized that the custom-event was bound to the DOM and couldn't be triggered using $emit. With VueJS 2's template syntax, this can be easily achieved like so:

<template>
   <div @custom-event="handleCustomEvent"></div>
</template>

If you have any insights or solutions to this issue, your help is greatly appreciated. Thank you!

javascript vue.js vuejs2

Answer 1

Answer №1

It may be a little late to join the party, but here's how you can trigger the event:

protected render(h: any) {
    return (
        <a onClick={(e: any) => this.$emit('test')}>
            {this.$slots.default}
        </a>
    );
}

To listen for the event:

protected render(h: any) {
    return (
        <NavLink onTest={() => alert('clicked')}>
            <i class='fa fa-bars'></i>
        </NavLink>
    );
}

Answer 2

It may be a little late to join the party, but here's how you can trigger the event:

protected render(h: any) {
    return (
        <a onClick={(e: any) => this.$emit('test')}>
            {this.$slots.default}
        </a>
    );
}

To listen for the event:

protected render(h: any) {
    return (
        <NavLink onTest={() => alert('clicked')}>
            <i class='fa fa-bars'></i>
        </NavLink>
    );
}

Answer 3

Answer №2

Based on the information provided in the documentation, it is recommended to use camel-case for JSX event handlers instead of kebab-case. Here is an example code snippet to follow:

render (h) {
  return (
    <div onCustomEvent={this.handleCustomEvent}></div>,
  )
}

Answer 4

Based on the information provided in the documentation, it is recommended to use camel-case for JSX event handlers instead of kebab-case. Here is an example code snippet to follow:

render (h) {
  return (
    <div onCustomEvent={this.handleCustomEvent}></div>,
  )
}

Answer 5

Answer №3

Let's say your unique event is unique-event. Choose one of these options to handle it:

onUnique-event
on-unique-event

I came across these solutions on this page: https://github.com/vuejs/babel-plugin-transform-vue-jsx/issues/164

Answer 6

Let's say your unique event is unique-event. Choose one of these options to handle it:

onUnique-event
on-unique-event

I came across these solutions on this page: https://github.com/vuejs/babel-plugin-transform-vue-jsx/issues/164

Creating a unique event binding in Vue 2 with JSX

Answer №1

Answer №2

Answer №3

Similar questions

Concerns arise with the swal destroy functionality

End a loop by triggering a click event in jQuery

tips for transforming a javascript string into a function invocation

Terminating a client connection in Node.js using socket.io

Utilizing an array for assigning values in conditional statements

Reactjs is currently not integrated with Firebase

What is the most effective method for sorting through an array to generate a new array?

Azure Chatbot that logs conversations in Webchat whenever the user selects 'none of the above' option

Show a specific item when selecting an option from a dropdown menu

Library for JavaScript that enables incremental testing using regular expressions

Update the controller to modify the route parameter

Angular with Firebase: How to ignore a field in a query

Display/Conceal content with JQuery on a PHP webpage

passing parameters via routes

Cache path for generated AngularJS templates in Grunt Angular Templates

Using Javascript to toggle visibility of radio buttons on a PDF form

Encountering a CORS-like error causes issues for Swagger

How can I access the feed of a single user using the Facebook API

JavaScript Array not displaying correctly as an array

No results found with mongoose.findOne