[Vuejs]-Cannot get Ajax result from a Vue method to data()s returned variables

0👍

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

0👍

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

Leave a comment