How do I clone a mouseevent for $emit in vue

Question

I am trying to

• emit an event from a vue2 component
• have the event reflect exactly the native mouse event happening in the component
• and have two fields added - canvasX and canvasX

I tried adding the fields like this:

evt.canvasX = x;
evt.canvasY = y;

and emitting like this:

this.$emit('mouseup', evt)

but in the handler in the outer component there is no trace of canvasX and canvasX

Barring copying all properties one by one - is there a way to extend the event with new properties?

Answer 1

You could try creating a new event data object which inherits properties from the original event.

this.$emit('mouseup', { ...evt, canvasX: x, canvasY: y })