Using Event Names stored in a variable in VueJs

Question

In VueJS, a child component can emit an event, for example:

this.$emit('toggle-button')

In the parent, we can listen to this event as follows:

<my-component v-on:toggle-button="doSomething"></my-component>

This works great. But I have a requirement where the event name (in this case, toggle-button) is stored in a variable or Vuex store. So, I don't have the exact event name but a variable or store with the name of the event.

In such a case what would be the syntax for referring that that event name in the on-click directive?

For example, let say we have:

let eventName = 'toggle-button'

How can I use this variable (eventName) instead of the exact event name (toggle-button) in the following:

<my-component v-on:toggle-button="doSomething"></my-component>

tony19 · Accepted Answer · 2022-07-16 02:19:10Z

1

You could use $on(EVENT_NAME, CALLBACK) in this case:

// <my-component ref="foo" />
this.$refs.foo.$on(eventName, doSomething)

Vue.component('my-component', {
  template: `<button @click="$emit('click', $event)">Click</button>`
});

new Vue({
  el: '#app',
  mounted() {
    const eventName = 'click';
    this.$refs.foo.$on(eventName, this.doSomething);
  },
  methods: {
    doSomething() {
      alert('clicked');
    }
  }
})

<script src="https://unpkg.com/[email protected]"></script>

<div id="app">
  <my-component ref="foo" />
</div>

edited Jul 16, 2022 at 2:19

answered Oct 11, 2018 at 10:01

tony19

140k23 gold badges281 silver badges354 bronze badges

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

3 Comments

asanas Over a year ago

Thank! I will try. And where should this code go in my parent template?

tony19 Over a year ago

@asanas No problem :) The code should probably go in the mounted() lifecycle hook (see demo I just added).

Ferrybig Over a year ago

Don't forgot to also deregister the event handler when its no longer needed, also you get a memory leak (also take care of the case when the value changes)

tony19 · Accepted Answer · 2022-07-16 05:05:36Z

0

If you render your component using separate render function, this is easy:

export default {
    props: {
        eventName: {
            type: String,
        },
    },
    render: function (createElement) {
        return createElement('my-component', {
            on: {
                [this.eventName]: (event) => {
                    console.log('Received event!')
                }
            }
        })
    }
}

Render functions also come with ability to dynamically specify a name for the component, if that is also required for your app

edited Jul 16, 2022 at 5:05

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Oct 11, 2018 at 10:08

Ferrybig

19k6 gold badges63 silver badges87 bronze badges

1 Comment

asanas Over a year ago

This looks really promising. I'm just wondering if it's possible to use this in Nuxt?

Collectives™ on Stack Overflow

Using Event Names stored in a variable in VueJs

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related