How to set a property in such a construction?

Question

Vue.js

I don't know Js well. I have always used vue templates for simple actions like reactive forms, ajax requests, etc. It was necessary to implement smart buttons for PayPal. Googled this option

<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>

The structure is similar to how I usually use it. But it’s different that all functions are launched in another function setLoaded + window.paypal .Buttons(. And I don’t understand how it works anymore.
According to the code.
There is a div in the template where the paypal button is rendered. The button settings are mounted in the script and upon confirmation from PayPal starts the Approve method, which starts the process on my back. And everything would be fine, but during the process I want to show a spinning spinner. And I did this.spinner = true in the approve function,
but the property of the spinner in the date in such a construction does not change
because the approve method is inside the setLoaded: function () function and this is most likely why there is no access to the spinner from approve. But these are my only guesses. In general, the question is - how can I set the spinner to data from the approve method or how else can I activate the b-spinner in the template?

Answer 1

Use an arrow function instead of a regular one and read how this works in javascript.