Functional component emit event: Expression is not callable - Vue

Question

Functional component with render function:

render(createElement, { listeners } {
  return createElement('div', {
    on: {
      click: () => {
        // issue is on this line
        const onItemClick: any = listeners['item-click']
        onItemClick(1, 2, 3)
      }
    }
  })
}

How to correctly type onItemClick so i won't get an error:

const onItemClick: Function | Function[]
This expression is not callable.
  No constituent of type 'Function | Function[]' is callable.ts(2349)

Signature of listeners:

var listeners: {
    [key: string]: Function | Function[];
}

It says array is not callable, check if array -> call each else call value — Estradiaz
– Estradiaz, Commented Jul 9, 2020 at 7:10

Alexander Kim · Accepted Answer · 2020-07-15 04:48:09Z

1

Solved it using type assertion:

const onItemClick = listeners['item-click'] as (val1: string, val2: string) => void
onItemClick('123, '456')

answered Jul 15, 2020 at 4:48

Alexander Kim

18.5k24 gold badges111 silver badges165 bronze badges

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

1 Comment

Ahmad Over a year ago

Type assertion is not a true solution and seems like a workaround. I wonder why the type is Function | Function[].

Stark Buttowski · Accepted Answer · 2020-07-09 07:03:56Z

0

Try replacing the arrow function with the function() constructor.

on: { click: function() { // do the stuff }}

answered Jul 9, 2020 at 7:03

Stark Buttowski

1,8492 gold badges11 silver badges21 bronze badges

Collectives™ on Stack Overflow

Functional component emit event: Expression is not callable - Vue

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related