Блог

У меня есть этот компонент, я только начал работать с компонентами до этого момента, когда я пытаюсь извлечь данные через ajax, при console.log вводе внутри метода — я получаю фактический результат, но результат не возвращается.

1. Чего я не понимаю (в vanilla js при выполнении того же самого из объекта это работает нормально.. так почему в Vue это не работает? В чем причина из-за кулис?)

2. Как я могу извлекать данные с помощью $.ajax ?

3. Каковы мои другие альтернативы и почему? (Я знаю об Axio, никогда им не пользовался, не уверен, зачем его использовать, если я могу использовать fetch, который, кстати, fetch у меня тоже не сработал — вот почему я вернулся к $.ajax).

index.js

 import Vue from 'vue';
import VueRouter from 'vue-router';
import axios from 'axios';
import VueAxios from 'vue-axios'

Vue.use(VueRouter);
Vue.use(VueAxios, axios);

const Dashboard_testcomponent      = () => import('../vue/dashboard/test/testcomponent.vue');


let routes = [
    {
        path: '/main',
        component: Dashboard,
        children: [
            {
                path: 'testcomponent',
                component: Dashboard_testcomponent
            }
        ]
    }
];


window.router = new VueRouter({
    mode: 'history',
    routes
});
  

testcomponent.vue:

 <script>
    import Form    from "../../components/Form.vue";
    import Tabs    from "../../components/Tabs.vue";

    export default {
        name: 'testcomponent',
        components: {
            Form,
            Tabs
        },
        data() {
            return {
                reportType: 'testreport', 
                dates: {},
                list: {} 
        }
        ,
        created() {
        },
        mounted() {
        },
        destroyed() {
        },
        watch: {
        },
        methods: {
            // Submit form
            formSubmit: function(data) {
                console.log('Submit form here');
                console.log(data);

                // SetLoader();

                this.list = this.getList();
                console.log(this.getList());
                console.log(this.List);
            }, 
            // Fetch List By List type 
            getList: function() {

                axios.post('/call/api/getList', {
                    'reportType': this.reportType
                })
                .then(function (response) {
                    if (response.status === true) {
                        console.log(response);
                        return response.data;
                    }
                })
                .catch(function (error) {
                    console.log(error);
                });


            }
        }
    }
</scrip1t>


<templat e>

        <Form 
            :useGroupFilter="true"
            :useDateRange="true"
            @submit="formSubmit"
        />


</template>
  

В вашем коде getList ничего не возвращает, потому что axios.post является асинхронной функцией и выполняется позже. Вы должны назначить данные ответа в .затем обратный вызов. Что-то вроде:

 getList: function() {
    axios.post('/call/api/getList', {
        'reportType': this.reportType
    })
    .then(function (response) {
        // if (response.status === true) { (if 'then' fired means that it succeeded already)
            console.log(response);
            this.list = response.data;
        // }
    })
    .catch(function (error) {
        console.log(error);
    });
}
  

Установите Axios for в каталог вашего проекта

 $ npm install axios
  

импорт в app.js или в компоненте, который вы хотите

 <script>
//optional import for individual component
import axios from "axios";
</script>

    //if you have imported in app.js
        Vue.use(axios);
  

затем выполните вызов axios, подобный:

       let reqData = {
        p_Params1: '',
        p_Params2: '',
        p_Params3...: ''
      };

      axios({
        method: "post",
        url: "http://127.0.0.1/sample_sub/sample.ext",
        crossdomain: true,
        data: $.param(reqData),
        headers: {
          "Content-Type": "application/x-www-form-urlencoded"
        }
      })
        .then(response => {
//your resposne here
        })
        .catch(error => console.log(error));
  

Внимание! по умолчанию axios не анализирует данные в json, поэтому используйте $.param