vuejs
Can't Expand Object that Extends EventTarget
I have a js class that extends EventTarget to take advantage of js's built in event handling, but when I view an instance of that item in the component inspector it just says EventTarget and I'm unable to expand it or interact with it in anyway. Is there a way to get this to retain that functionality while extending that class?
class Dialog extends EventTarget {
// ...
}
class DialogService {
/**
* Internal reference to the existing dialogs
*/
public readonly instanceMap: Map<string, Dialog>;
constructor() {
this.instanceMap = reactive(new Map());
}
add(dialog: Dialog) {
this.instanceMap.set(dialog.id, dialog);
dialog.addEventListener('transitioned', () => this.remove(dialog);
}
// ...
}
As a workaround, you can add
get [Symbol.toStringTag]() {
return 'Object'
}
to your Dialog class
Then it will work fine:
@Lootjs I take that back, it worked to have it workable in devtools, but now trying to dispatch events throws Illegal Invocation errors.
this.dispatchEvent(new CustomEvent('transitioned', { detail: state }));
I ended up refactoring it to use a private instance of EventTarget instead of extending it and then creating the methods to point to that. Psuedo code example:
class Dialog {
private eventTarget: EventTarget;
constructor() {
this.eventTarget = new EventTarget();
}
dispatchEvent(....args) => this.eventTarget.dispatchEvent(...args);
addEventListener(....args) => this.eventTarget.addEventListener(...args);
removeEventListener(....args) => this.eventTarget.removeEventListener(...args);
}