How to populate component's data with axios method in Vue.JS

Question

I want to populate a component data using a method with Axios. However, with Axios, the component data is always undefined. If I don't use Axios (hardcode the return value), the component data populates correctly.

data () {
    return {
        myData: this.getData();
    }
},

methods:{
    getData(){
        axios({
          method: 'GET',
          url   : 'Department/GetAllForDropdown',
        }).then(function (response){
            return response.data;
        });
    }
}

How do I achieve this without using the conventional way of populating, e.g.

.then(function (response){
    self.myData = response.data;
})

Thank you.

=======EDIT========

I have a dynamic form builder. I am using vuetify. It creates the form components from the data I have declared.

<template>
    <div v-for="formItem in formDetails.formInfo">
        <v-text-field 
        v-if="formItem.type != 'select'
        :label="formItem.placeholder"
        v-model="formItem.value"
        ></v-text-field>

        <v-select
        v-if="formItem.type == 'select'
        :items="formItem.options"
        :label="formItem.placeholder"
        v-model="formItem.value"
        ></v-select>
    </div>
</template>


data () {
    return {
        formDetails: {
            title: 'myTitle',
            formInfo:[
                {
                  type:'text',
                  placeholder:'Name*',
                  value: '',
                },
                {
                  type:'select',
                  placeholder:'Option1*',
                  options: this.getOptions1(),
                  value: '',
                },
                {
                  type:'select',
                  placeholder:'Option2*',
                  options: this.getOptions2(),
                  value: '',
                },
            ]
        },
    }
},

methods:{
    getOptions1(){
        var self = this;
        axios({
          method: 'GET',
          url   : 'Department1/GetAllForDropdown',
        }).then(function (response){
            return response.data;
        });
    },
    getOptions2(){
        var self = this;
        axios({
          method: 'GET',
          url   : 'Department2/GetAllForDropdown',
        }).then(function (response){
            return response.data;
        });
    }
} 

I am currently stuck at making the select box dynamic, because I plan to pass in the options like

options: this.getOptions1(),

for them to get all the options in the select box.

Thank you.

Answer 1

The idea is still assigning the response to the item and leave a placeholder while loading.

getOptions(formItem) {
  formItem.loading = true;
  var placeholder = formItem.placeholder;
  formItem.placeholder = "Loading... Please wait";
  axios({
    method: "GET",
    url: "Department1/GetAllForDropdown"
  }).then(function(response) {
    formItem.loading = false;
    formItem.placeholder = placeholder;
    formItem.options = response.data;
  });
}

I write a small demo. You could try it out.