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

Answer 1

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'},.