Установите компонент трафарета с помощью NPM, его метод нельзя использовать непосредственно в реакции. JS и Vue. JS

Question

Я хочу использовать метод компонентов трафарета в responseing.js и vue.js, но я не могу использовать этот метод. Этот метод создается с помощью @METHOD в stencil.js. Мой код ниже:

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)

Answer 1

Это может быть проблема с синхронизацией. Несмотря на то, что элемент DOM существует, Stencil может не завершить загрузку компонента, поэтому метод может еще не существовать в прототипе. В качестве теста попробуйте вызвать метод из setTimeout (), например:

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

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