CODEWITHSUNDEEP
reactjsvue.jsnpm-installstenciljsreact-wrapper
Digvijaysinh Gohil
Digvijaysinh Gohil

Reputation: 13

Install stencil component using NPM, its method can not use directly in react. js and vue. js

I want to use the stencil component method in reacting.js and vue.js, but I can not use this method. This method is created using @METHOD in stencil.js . My code is below:

IN REACT.JS 

<li-rating ref={this.liRatingFontAwesome}></li-rating>

liRatingFontAwesome = React.createRef();
var liRating = this.refs.liRatingFontAwesome;
liRating.setSvgString();       <= Thit method can't find.

IN VUE.JS

<li-rating id="liRatingFontAwesome"></li-rating>

var liRating = document.getElementById("liRatingFontAwesome");
liRating.setSvgString();        <= Thit method can't find.




vue.esm.js?efeb:1897 TypeError: liRating.setSvgString is not a function
at VueComponent.mounted (RateDemo.vue?30fb:150)
at invokeWithErrorHandling (vue.esm.js?efeb:1863)
at callHook (vue.esm.js?efeb:4222)
at Object.insert (vue.esm.js?efeb:3148)
at invokeInsertHook (vue.esm.js?efeb:6351)
at Vue.patch [as __patch__] (vue.esm.js?efeb:6570)
at Vue._update (vue.esm.js?efeb:3948)
at Vue.updateComponent (vue.esm.js?efeb:4069)
at Watcher.get (vue.esm.js?efeb:4482)
at new Watcher (vue.esm.js?efeb:4471)

Upvotes: 0

Views: 259

Answers (1)

G. Tranter
G. Tranter

Reputation: 17938

This could be a timing issue. Even though the DOM element exists, Stencil may not have completed loading the component, so the method may not yet exist in the prototype. As a test, try calling the method from within a setTimeout() for example:

<li-rating id="liRatingFontAwesome"></li-rating>

var liRating = document.getElementById("liRatingFontAwesome");
setTimeout(() => liRating.setSvgString(), 2000);

Upvotes: 1

Related Questions