How to call vue method inside a function within a different vue method

Question

I am trying to call a Vue method called "updateUserToPremium()" within a function which is inside another vue method called testing. I'm trying to do this because 'rp' is a javascript eventhandler which is provided by a payment provider.

I've also tried with 'this.updateUserToPremium(userId)' but that does not solve the issue. I'm trying to understand the relationship between the scopes but i'm missing something.

methods: {
  updateUserToPremium(userId) {
    axios.post(`/user/${userId}`, {}, {
      headers: { "Authorization": `Bearer ${this.$store.state.token}` }
    }).then(res => {
        console.log('Success session creation');
        this.routeToStartpage()
    }).catch(error => {
        console.log(error);
        return error;
    })
  },

  testing(userId) {
    var rp = new Reepay.ModalSubscription(sessionId);
    rp.addEventHandler(Reepay.Event.Accept, function(data) {
        console.log('Success', data);

        updateUserToPremium(userId);  // <--- This triggers updateUserToPremium is not defined' 
    
        rp.destroy();
    })
  },
}

Use an arrow function to capture the Vue component as the current context: `rp.addEventHandler(Reepay.Event.Accept, (data) => { this.updateUserToPremium(data) })` — tony19, Sep 08 '21 at 20:21

score 1 · Accepted Answer · answered Sep 08 '21 at 20:23

1

try call method like that:

rp.addEventHandler(Reepay.Event.Accept, (data) => {
    console.log('Success', data);

    this.updateUserToPremium(userId);  // <--- This triggers updateUserToPremium is not defined' 

    rp.destroy();
})

answered Sep 08 '21 at 20:23

Yazan Alnughnugh

130
4

How to call vue method inside a function within a different vue method

1 Answers1