@evomed

Как засетать свойство в такой конструкции?

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 в темплейте?
  • Вопрос задан
  • 127 просмотров
Решения вопроса 1
Aetae
@Aetae
Тлен
Используй стрелочную функцию вместо обычной и почитай как работает this в javascript.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы