TypeError: Cannot read property 'post' of undefined using vue.js and axios

Question

I am trying to pass data via an axios' post in a vue method and getting the error:

"signinVue.js:60 Uncaught TypeError: Cannot read property 'post' of undefined"

Vue script:

new Vue({
    el:'#app',
    data:{
        email:'',
        code:'',
    },
    methods:{
        signin:function(){
            console.log(this.email + ' ' + this.access);
            let url = '../App/testConnection.php';
            this.axios.post(url, {email:this.email, code:this.code})
                .then((response) =>{
                  console.log(response);
                })
                .catch(function (error) {
                    console.log(error);
                });
                //console.log(this.email + ' ' + this.access);
                //alert(this.email);
        }
    }
});

Can you post how do you import the axios package?

Ru Chern Chong
– Ru Chern Chong

2018-04-23 00:10:58 +00:00
Commented Apr 23, 2018 at 0:10 — Ru Chern Chong
– Ru Chern Chong, Commented Apr 23, 2018 at 0:10

acdcjunior · Accepted Answer · 2018-04-22 23:52:25Z

Axios is usually registered as a global variable, so, instead of:

this.axios.post(url, {email:this.email, code:this.code})

you should use:

axios.post(url, {email:this.email, code:this.code})

Notice the this. is gone.

Note: If you wanted to really use Axios via this.axios, you should add it to the Vue prototype, as such:

Vue.prototype.axios = window.axios; // this will enable this.axios inside Vue instances
new Vue({
// ...

But this is sort of a bad practice. If you with to add properties to the Vue prototype like that, the suggested approach is to use a $ or _ prefix, like:

Vue.prototype.$axios = window.axios; // this will enable this.$axios inside Vue instances

Because if you set Vue.prototype.axios, it could conflict with some (unlikely, yes) data property you have named axios, as in :data:{email:'', code:'', axios: 'w00t'},.

Collectives™ on Stack Overflow

TypeError: Cannot read property 'post' of undefined using vue.js and axios

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related