How to set data from external callback in Vue?

Question

I included some external SDK into my component:

mounted() {
    // Load external Script
    let externalScript = document.createElement('script')
    externalScript.setAttribute('src', 'https://x.klarnacdn.net/kp/lib/v1/api.js')
    document.head.appendChild(externalScript)
    ...

Later I am receiving a callback like this:

authorizeKlarna: function(){  
        Klarna.Payments.authorize({
        payment_method_category: "pay_later"
        }, function(res) {
        console.debug(res);
        if(res.approved == true){ 
            this.token = res.authorization_token
        }
        })
      },

However this.token will not be updated because I am out of scope. Is there any simple way how to access data of my vue component from this external callback?

Adam Orłowski · Accepted Answer · 2021-02-24 22:58:20Z

1

Try changing your function(res) to Arrow Function (res) =>

authorizeKlarna: function(){  
  Klarna.Payments.authorize(
  { payment_method_category: "pay_later" },
  (res) => {
    console.debug(res);
    if(res.approved == true){ 
      this.token = res.authorization_token
    }
  }
)
},

answered Feb 24, 2021 at 22:58

Adam Orłowski

4,53226 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Tobi Over a year ago

That's it. Thank you so much!

Collectives™ on Stack Overflow

How to set data from external callback in Vue?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related