[Vuejs]-How can I display error from response ajax?

0👍

In your changePassword You are passing your data forward, but you are:

  • not differentiating errors (both paths of changePassword simply return the data); and also are
  • ignoring the data and errors arguments in your action.

Changes below.

Add a proper Promise in your changePassword:

import Vue from 'vue'
export default {
    // api to change password
    changePassword (password, cb, ecb = null) {
        return new Promise((resolve, reject) =>                            // added       
          axios.post('/member/profile/change-password', password).then(
            (resp) => {
                resolve(resp.data);                                        // resolve()
            }, 
            (resp) => {
                reject(resp);                                         // reject() without .data
            }
         )
       );
    }
}

And, in your actions, also add the Promise:

// actions
const actions = {
    changePassword ({ dispatch,commit,state },{password})
    {
        return new Promise((resolve, reject) =>                            // added       
         users.changePassword(password,
            data => {
               commit(types.CHANGE_PASSWORD_SUCCESS)
               resolve(data);                                                // forward
            },
            errors => {
               commit(types.CHANGE_PASSWORD_FAILURE)
               reject(errors);                                               // forward
            }
        ));
    }
}

Leave a comment