Как заполнить данные компонента методом axios в Vue.JS - PullRequest
Новая
       26

Как заполнить данные компонента методом axios в Vue.JS

0 голосов
/ 27 декабря 2018

Я хочу заполнить данные компонента, используя метод с Axios.Однако в Axios данные компонента всегда неопределены.Если я не использую Axios (жёсткий код возвращаемого значения), данные компонента заполняются правильно.

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

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

Как мне добиться этого без использования обычного способа заполнения, например, 

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

Спасибо.

======= РЕДАКТИРОВАТЬ ========

У меня есть динамический конструктор форм.Я использую vuetify.Он создает компоненты формы из данных, которые я объявил.

<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;
        });
    }
}

В настоящее время я застрял в том, чтобы сделать поле выбора динамическим, потому что я планирую передать такие параметры, как 

options: this.getOptions1(),

, чтобы они получили все параметры в поле выбора.

Спасибо.

1 Ответ

0 голосов
/ 27 декабря 2018

Идея по-прежнему заключается в назначении ответа элементу и оставлении заполнителя при загрузке.

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;
  });
}

Я пишу небольшую демоверсию .Вы можете попробовать это.

...