Axios Response data and Vue JS , Using the data

Question

New to Vue and not much of a lover of Javascript so I have a Vue component thats using Axios to get some data which I have in the console. I simply cant get the code to out to my form elements.

So I have Axios Intercepting the response and getting the data

  methods: {

    },
    mounted: function() {
        axios.interceptors.response.use(function (response) {
            return response.data;
        });
    },
    destroyed: function() {

    }
}

So that is mounted on page load and in my data I have

 data() {
            return {
                formpersonaldetails: {},

                title: this.results.title,
                titleoptions: ['Mr', 'Mrs', 'Miss', 'Ms'],
                fname: this.results.fname,
                sname: this.results.sname,
                dob: this.results.dob,

Which as you can guess doesnt work, so where am I going wrong??

Response looks like so:

{"id":2,"user_id":null,"fname":"Graham","sname":"Morby-Raybould","dob":"1982-07-10T08:22:00.000Z","gender":"Male","nationality":"British","mobile":null,"telephone":null,"hname":"","address2":"","address3":"","postcode":"","noktitle":"","nokfname":"","noksname":"","nokcontactnumber":"","nokhname":"","nokaddress2":"","nokaddress3":"","nokpostcode":"","emp_type":"","trade":"","ninumber":"","utrnumber":"","vatreg":null,"vatcert":"","created_at":"2017-10-10 08:22:37","updated_at":"2017-10-10 08:22:37"}

It doesn't work probably because when you receive the response from axios you did not do anything further about it. You will want to map the response data into the component's data object, but of course since we have no idea what your response is, we can't tell you how to merge that response into your pre-existing data. — Terry

Marko Savic Marko Savic · Accepted Answer · 2017-10-11T08:20:14

You need to pass response to the function:

axios.interceptors.response.use(function (response) {
    // Do something with response data
    return response;
  }, function (error) {
    // Do something with response error
    return Promise.reject(error);
  });

More information here: Axios

Axios Response data and Vue JS , Using the data

1 Answers