DEV Community

Discussion on: 8 secrets Vue Developers must know

Collapse
anduser96 profile image
Andrei Gatej

Really great tips! Thanks for sharing!

Here’s my little tip, how to add multiple listeners to a functional component.

// in render function

const functionNames = Object.keys(listeners);
const combinedFunctions = ctx => functionNames.forEach(fn => listeners[fn](ctx));

 const button = h('button', {
     ...functionNames.length && { on: { click: combinedFunctions } } 
   }, content);

return button;
Collapse
rolanddoda profile image
Roland Doda Author

Thanks for the comment Andrei. Is that equal to:

<button v-on="listeners"> Click me </button>

?

Collapse
vhoyer profile image
Vinícius Hoyer

why is that listeners instead of $listeners?

Thread Thread
rolanddoda profile image
Roland Doda Author

in functional components, it's listeners. Docs

Collapse
anduser96 profile image
Andrei Gatej

Doesn’t seem to work. 🤔

Thread Thread
rolanddoda profile image
Roland Doda Author

What doesn't seem to work?

Thread Thread
anduser96 profile image
Andrei Gatej

Your snippet. There’s a likelihood of me doing something wrong though. I’m rendering my component using a render function.

Thread Thread
rolanddoda profile image
Roland Doda Author

Since we are talking about functional components the full code snippet should be:

<template functional>
  <button v-on="listeners">Click me </button>
</template>
Thread Thread
anduser96 profile image
Andrei Gatej

I’ll give it another try tomorrow and I’ll let you know how it went!