VueJSのaxios.spread関数で外部関数を呼び出す方法は？

Question

私はaxiosの約束の中で外部関数を呼び出すことはできません。私のエラーが

[Uncaught (in promise) TypeError: this.showNotification is not a function]

showNotificationあるミックスイン内部外部関数であるが、私はこれは非常に一般的な間違いですuserCompInfo機能に

var mixin = { 
methods: { 
//function to get all user info 
userInfo:function(){ 
    //alert(localStorage.getItem("sessionKey")) 
    if(localStorage.getItem("sessionKey")==null) 
     session = "null"; 
    else 
     session= localStorage.getItem("sessionKey"); 

    return axios.post("/api/user/info",{ 
     user_id:localStorage.getItem("userId"), 
     session_key:session    
    }); 

}, 
//function to get all competition info 
compInfo:function() 
{ //calling API competition info to get the avaliable competition for now 
    return axios.post("/api/competition/info",{ 
     lang:source.lang     
    }); 

}, 
userCompInfo:function() 
{ 
    axios.all([this.userInfo(),this.compInfo()]) 
    .then(axios.spread(function (user, comp){ 
     if(comp.data.result.errorcode == 0) 
     { 
      source.competition = comp.data.competiton_detail; 

     } 

     //set the user id in local storage 
     localStorage.setItem("userId",user.data.user_info.user_id); 
     //check on session key to save it in local storage 
     if(user.data.user_info.session_key != "") // for testing 
      localStorage.setItem("sessionKey",user.data.user_info.session_key); 

     // get user data successfuly 
     if(user.data.result.errorcode == 0) 
     { //set response data in user 
      source.user = user.data.user_info; 
      //to set this user status 
      this.renderUserInfo(); 
      /////////// 
      //source.competition.is_active=1; 
      //check on user status to show notification 
      if(source.user.vip && source.user.suspended) 
      { 
       this.showNotification(context.suspended_vip.title+" "+source.user.msisdn, context.suspended_vip.body,["btn_notifi_ok"]); 
      } 
      //check if this valid competition is active or not to show notification according to it and to user status 
      if(source.competition.is_active==1) 
      { 
       if(source.user.registered && newUser==1) 
       { 
        this.showNotification(context.registered_firstTime.title, context.registered_firstTime.body, ["btn_notifi_start_play"]); 
       } 
       else if(source.user.free && source.user.newFreeUser) 
       { 
        this.showNotification(context.freeUser_firstTime.title, context.freeUser_firstTime.body, ["btn_notifi_start_play"]); 
       } 
      } 
     } 

    })); 
}, 
// function to show notification modal 
showNotification:function(title, body, buttons) 
{ 
    //to hide all modal buttons first 
    $("#notification").find(".btn").hide(); 
    //set the modal title 
    $("#notification_title").html(title); 
    //set the modal body 
    $("#notification_body").html(body); 
    //for on buttons array to show all buttons that we want 
    for(i=0;i<buttons.length;i++) 
    { 
     $("#notification").find("#"+buttons[i]).show(); 
    } 
    //to display modal 
    $("#notification").modal("show"); 
}, 
//function to show the current user statue VIP, registered,free or suspended 
renderUserInfo:function() 
{ // intialize all flags of user status to false 
    source.user.vip = false; 
    source.user.registered = false; 
    source.user.free = false; 
    //check on user mode and set the according flag to it to true 
    if(source.user.sub_mode == "vip") 
    { 
     source.user.vip = true; 
    } 
    else if(source.user.sub_mode == "sub") 
    { 
     source.user.registered = true; 
    } 
    else 
    { 
     source.user.free = true; 
    } 
},}} 

Answer 1

それを呼び出すことはできません。 this（userCompInfo）は、コールバックの記述方法が原因でVueを参照していません。

コードでは、この変更を加えてください。

userCompInfo:function() 
{ 
    axios.all([this.userInfo(),this.compInfo()]) 
    .then(axios.spread(function (user, comp){ 
     // a bunch of code... 
    }.bind(this))); 
}, 

それとも

userCompInfo:function() 
{ 
    let self = this; 
    axios.all([this.userInfo(),this.compInfo()]) 
    .then(axios.spread(function (user, comp){ 
     // a bunch of code... 
     self.showNotification(...) 
     // some more code... 
    })); 
}, 

How to access the correct this inside a callback?

を参照してください。