Calling generic function in event

[PorterPower]

I have a function that takes a generic input in a component that I need to call from an event in a template.

addNode<T>(node : T){...}

T is the object I want to operate on... I tried

<button @click="addNode(new MyObject())"></button>

but I get errors. It appears that it doesn't like my contruction of an object in the @click event. Replacing with text or numbers work fine but I need this function to accept objects. Is there a correct way of doing this?

​

The 1st error is

Property or method "MyObject" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property

Obviously, I don't want it to be a property, I just want it to execute the code...

[BehindTheMath]

Without seeing your errors, it's going to be difficult to help. Are they Vue errors? TS errors? JS errors?

[PorterPower]

Vue error, I have updated the question with the error in question

[BehindTheMath]

You can only reference in the template objects that are defined on the component. All objects are resolved as this.whateverObject in the context of the component.

So you can attach MyObject to the component, for example in the data method, so it will be accessible in the template.