Js знаю плохо. Всегда пользовался vue-шаблонами для несложных действий типа реактивных форм, ajax запросов и тд. Понадобилось внедрить смарт кнопки для PayPal. Нагуглил такой вариант
<template>
<span>
<b-spinner
v-if="spinner"
></b-spinner>
<div v-show="!spinner" ref="paypal" class="mt-3"></div>
</span>
</template>
<script>
export default {
data() {
return {
spinner: false,
};
},
mounted: function () {
const script = document.createElement("script");
const ClientID = this.client_id;
script.src = `https://www.paypal.com/sdk/js?client-id=${ClientID}`;
script.addEventListener("load", this.setLoaded);
document.body.appendChild(script);
},
methods: {
setLoaded: function () {
window.paypal
.Buttons({
createOrder: function() {
},
onApprove: function (data) {
this.spinner = true
return axios
.post(route_capture_order)
.then(function (res) {
return res.data;
})
.then(function (details) {
this.spinner = false;
window.location.reload(false);
});
},
})
.render(this.$refs.paypal);
},
},
};
</script>
Структура похожая как я обычно юзаю. Но отличается, что все функции запускаются в еще одной функции setLoaded + window.paypal .Buttons(. И как это устроено я уже не понимаю.
По коду.
В темплейте есть див где рендерится кнопка paypal. В скрипте монтируется настройки кнопки и при подтверждении от PayPal запускается метод Approve, который у меня на бэке запускает процесс. И все бы ничего, но во время процесса я хочу показать крутящийся спинер. И я сделал в функции approve this.spinner = true
но свойство спинер в дата в такой конструкции не меняется
т.к. метод approve находится внутри функции setLoaded: function () и скорее всего поэтому из approve нет доступа к спиннер. Но это мои только предположения. В общем вопрос - как мне можно из метода approve засетать spinner в data или как еще можно активировать b-spinner в темплейте?
Средний
