title: Async/await axios calls with Vue.js
body: <p>I'm having a little trouble setting one of my this. values within my Vue.js application. I believe I'm either not understanding async axios calls correctly, or how async works within Vue.js.</p>
  
  <p>I have the following three methods:</p>
  
  <pre><code>updateAvailability(availability) {
      if (availability == true) {
          this.showYourDetails();
      } else {
          this.showBookingDetails();
      }
  },
  checkAvailability: async function(event) {
      event.preventDefault();
      const availability = await this.handleAvailabilityRequest(event);
      this.loading = true;
      console.log(availability); //This evaluates to undefined
      const availabilityUpdate = await this.updateAvailability(availability);
      this.loading = false;
  },
  handleAvailabilityRequest: async function(event) {
      event.preventDefault();
      let valid = this.validateFieldsForAvailabilityRequest(); //Ignore this for this particular question, assume valid is always true
  
      if (valid) { // This is true
          let config = {
              headers: {
                  "X-CSRFToken": this.csrfToken,
                  "Content-Type": 'application/x-www-form-urlencoded',
              }
          }
  
          let formData = new FormData();
          let reservationTime = this.reservationHourSelected + ':' + this.reservationMinuteSelected;
  
          formData.set('type', 'availability_request');
          formData.set('session_name', this.sessionName);
          formData.set('reservation_party_size', this.reservationPartySize);
          formData.set('reservation_date', this.reservationDate);
          formData.set('reservation_time', reservationTime);
  
          await axios.post('{{ request_absolute_uri }}', formData, config).then(function(response) {
              this.availabilityMessage = response.data.message;
          }).catch(function(error) {
              this.availabilityMessage = false;
              console.log(error);
          });
      }
      return this.availabilityMessage;
  }
  </code></pre>
  
  <p>My <code>response.data.message</code> is being passed back from my framework as True/true but it seems I'm not returning anything from the <code>await this.handleAvailabilityRequest()</code> function? The post definitely hits the server as logging shows everything I want - then returns back message = true in json response context.</p>
  
  <p>So, I guess ... help! Completely dumbfounded as to why this isn't working other than it being an issue with waiting for the promise...</p>