“TypeError: Cannot read property 'get' of undefined”, Axios, Vue.JS

Question

I am getting this strange error from Vue when trying to access get request from api using axios, I am getting "TypeError: Cannot read property 'get' of undefined"

 <template>
    <div class="home">
        <h1>{{ msg }}</h1>
        <p>Welcome to your new single-page application, built with <a href="https://vuejs.org" target="_blank">Vue.js</a>.</p>
    </div>
</template>

<script>
    var Vue = require('vue');

   // import axios from "axios";

    window.axios=require('axios');
    export default {
        name: 'Home',
        props: {
            msg: String
        },
        component: {
        },   
        mounted: function () {
            alert('Hi ');
            this.axios.get('https://api.github.com/users')
                .then(value => {
                    alert(value);
                         
                });
        }

    };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

It should be just axios.get, not this.axios.get. You may see this.axios used in some examples but in those cases they have stored axios on this, which doesn't appear to be the case in your code. — skirtle
I also suggest sticking to the import approach rather than using require and window. — skirtle

Majed Badawi Majed Badawi · Accepted Answer · 2020-08-29T21:21:45

this does not reference to window in your case. A better approach would be importing axios in the component:

import axios from 'axios';

A more efficient way is to set it once globally in the main.js file:

Vue.prototype.$http = axios

And using it where ever you want as this.$http

“TypeError: Cannot read property 'get' of undefined”, Axios, Vue.JS

1 Answers