Discussion on: 8 secrets Vue Developers must know

View post

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;

Roland Doda • Jul 14 '19

Thanks for the comment Andrei. Is that equal to:

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

Vinícius Hoyer • Jul 14 '19

why is that listeners instead of $listeners?

Roland Doda • Jul 14 '19

in functional components, it's listeners. Docs

Andrei Gatej • Jul 14 '19

Doesn’t seem to work. 🤔

Roland Doda • Jul 14 '19

What doesn't seem to work?

Andrei Gatej • Jul 14 '19

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

Roland Doda • Jul 14 '19

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

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

Andrei Gatej • Jul 14 '19

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