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.

You need to set the data in the `then`. You can pass it an arrow function and use `this.myData` — Mark, Dec 27 '18 at 07:13
@appleapple my Javascript is not very good, but I assumed in .then() it will return the data to myData variable. But it doesn't seem so.. thank you — Justin Lim, Dec 27 '18 at 07:16
the function inside `.then()` is executed after the request finish, and itself returns a `Promise` immediately — apple apple, Dec 27 '18 at 07:18
@MarkMeyer I normally would set 'this.myData = response.data' but how would i do it with 'return response.data'? — Justin Lim, Dec 27 '18 at 07:18
`then` returns a promise. You can’t directly return the value. — Mark, Dec 27 '18 at 07:18
@MarkMeyer i need to return a value, any possible way to achieve?? — Justin Lim, Dec 27 '18 at 07:20
Then post more code to express your need, it's impossible to return a concrete value when some async operation is involved. — obfish, Dec 27 '18 at 07:21
Its one of the most popular questions https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call — Mark, Dec 27 '18 at 07:22
ok, I will add more code to express my needs, please hold on, thanks — Justin Lim, Dec 27 '18 at 07:23
@obfish yes I am using vuetify, sorry I forgot to let you know — Justin Lim, Dec 27 '18 at 07:48

score 1 · Accepted Answer · answered Dec 27 '18 at 08:20

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.

Thanks for your help, this gave me an idea to solve it, by looping through all the select while sending over the api url to be called. This seems to be the best way so far. — Justin Lim, Dec 27 '18 at 08:28

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

1 Answers1