Styjun

I have this component, I have just started working with components until this point where there I am trying to fetch data via ajax, when console.loging inside the method - I get the actual result, but the result isn't returned.

1. What is it that I'm not understanding (In vanilla js when doing the same from an object, it works fine.. so why in Vue it doesn't work? What's the reason from behind the scenes?)




2. How can I fetch data using $.ajax?




3. What are my other alternatives and why? (I know of Axio, never used it, not sure why to use it if I can use fetch, which btw, fetch didn't work for me too - that's why I went back to $.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>

In you code getList is not returning anything, because axios.post is async function and executes later.
You should assign response data in .then callback.
Something like:

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

Install Axios for in your project directory

$ npm install axios

import in app.js or in the component which you want

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

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

then make axios call like:

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

Note! by default axios does not parse the data to json so use $.param