[Vuejs]-Axios.all shows a function as undefined

Your Vue structure and some logic parts are incorrect:

1. You should rename your mounted section to methods I think it’s typo.

2. You can not call methods with way you provide in your question, place your initial request to mounted or created hook and invoke methods on this :

   mounted() {
      axios.all([this.getAllTicketGroups(), this.getEventId()])
         .then(axios.spread(function (list, got){
            console.log(list);
            console.log(got);
         }));
   }
   

3. Also you reference some response variable in the top of getEventId method which will always be undefined because it is not declared.

4. Also you does not see anything in console after main request finished successfully because you don’t return anything in getAllTicketGroups and getEventId “thens”. So you should re-return your response in then to make console.log display your response.

UPDATE

5. Request chaining for tickets, quick example:

    mounted() {
   
      this.getAllTicketGroups().then((response) => {
          let requests = [];
          this.allTickets.forEach((t) => {
             requests.push(this.getEventId(t.event_id));
          });
          return axios.all(requests);
      });
    }
    ...
    getEventId: function(event_id){
       if(!(event_id in this.findTickets) && 
         this.eventsId.indexOf(event_id) == -1){
           return axios.get('https://api.ticketpass.co/event/' + event_id,{
               headers:{
                   "Content-Type" : "application/json",
                   "Accept" : "application/json",
                   "Authorization" : this.accessToken
               }
           })
           .then(response => {
               console.log(response.data);
               this.findTickets[response.data.id] = response.data;
           })
           console.log("Data Added");
       }else{
           console.log("IN Object");
       }
       console.log(this.findTickets);
   }