I'm struggling to get @Method in stenciljs working - any help would be appreciated.
Here's my ponent code with a function called setName that I want to expose on my ponent:
import { Component, Prop, Method, State } from "@stencil/core";
@Component({
tag: "my-name",
shadow: true
})
export class MyComponent {
@Prop() first: string;
@Prop() last: string;
@State() dummy: string;
@Method() setName(first: string, last: string): void {
this.first = first;
this.last = last;
this.dummy = first + last;
}
render(): JSX.Element {
return (
<div>
Hello, World! I'm {this.first} {this.last}
</div>
);
}
}
Here's the html and script that references the ponent:
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0">
<title>Stencil Component Starter</title>
<script src="/build/myponent.js"></script>
</head>
<body>
<my-name />
<script>
var myName = document.querySelector("my-name");
myName.setName('Bob', 'Smith');
</script>
</body>
</html>
Here's a screen shot of the error I'm getting which is Uncaught TypeError: myName.setName is not a function:
I'm struggling to get @Method in stenciljs working - any help would be appreciated.
Here's my ponent code with a function called setName that I want to expose on my ponent:
import { Component, Prop, Method, State } from "@stencil/core";
@Component({
tag: "my-name",
shadow: true
})
export class MyComponent {
@Prop() first: string;
@Prop() last: string;
@State() dummy: string;
@Method() setName(first: string, last: string): void {
this.first = first;
this.last = last;
this.dummy = first + last;
}
render(): JSX.Element {
return (
<div>
Hello, World! I'm {this.first} {this.last}
</div>
);
}
}
Here's the html and script that references the ponent:
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0">
<title>Stencil Component Starter</title>
<script src="/build/myponent.js"></script>
</head>
<body>
<my-name />
<script>
var myName = document.querySelector("my-name");
myName.setName('Bob', 'Smith');
</script>
</body>
</html>
Here's a screen shot of the error I'm getting which is Uncaught TypeError: myName.setName is not a function:
Share Improve this question asked May 10, 2018 at 12:05 Carl RipponCarl Rippon 4,6739 gold badges52 silver badges66 bronze badges3 Answers
Reset to default 13Methods are not immediately available on a ponent; they have to be loaded/hydrated by Stencil before you can use them.
Components have a ponentOnReady function that resolve when the ponent is ready to be used. So something like:
var myName = document.querySelector("my-name");
myName.ponentOnReady().then(() => {
myName.setName('Bob', 'Smith');
});
Just posting another answer because this has since changed, with Stencil One.
All @Method decorated methods are now immediately available on the ponent, but they are required to be async, so that you can immediately call them (and they resolve once the ponent is ready). The use of ponentOnReady for this is now obsolete.
However, you should make sure that the ponent is already defined in the custom element registry, using the whenDefined method of the custom element registry.
<script>
(async () => {
await customElements.whenDefined('my-name');
// the ponent is registered now, so its methods are immediately available
const myComp = document.querySelector('my-name');
if (myComp) {
await myComp.setName('Bob', 'Smith');
}
})();
</script>
Here you should not use @Method , it is not a best practice. We should always minimize the usage of @Method. This helps us to scale the app easily.
Instead pass data through @Prop and @Watch for it.
Ok , in your case , Please add async before the method name