CODEWITHSUNDEEP
laravellaravel-5vue.js
Davide Casiraghi
Davide Casiraghi

Reputation: 18117

Laravel 5.7 - How to retrieve data from an API with a axios.get?

I'm trying to get data from an API in a Laravel Vue component. I get this error in the console:

TypeError: Cannot set property 'continents' of undefined

What am I missing?

This is my code:

<script>
    export default {
        mounted() {
            console.log('Component mounted.');
        },
        created(){
            this.loadData();
        },
        data() {  
            return {
                continents: [],
            }
       },
       methods: {
            loadData: function() {
                axios.get('/api/continents')
                  .then(function (response) {
                    // handle success
                    console.log(response.data);
                    this.continents = response.data;
                  })
                  .catch(function (error) {
                    // handle error
                    console.log(error);
                  })
                  .then(function () {
                    // always executed
                  });
            },       
        },  
    }
</script>

Upvotes: 4

Views: 9469

Answers (3)

Riddhi
Riddhi

Reputation: 2244

You should use arrow function in your call as instance of this is not available in your .then function of promise.Hence try as below.

Read more about arrow functions here .

methods: {
        loadData: function() {
            axios.get('/api/continents')
              .then((response) => {
                // handle success
                console.log(response.data);
                this.continents = response.data;
              })
              .catch(function (error) {
                // handle error
                console.log(error);
              })
              .then(function () {
                // always executed
              });
        },       
    },

Upvotes: 1

Saurabh Mistry
Saurabh Mistry

Reputation: 13689

Here is the simple working demo of axios.get request

var app = new Vue({
  el: '#app',
  data: {
    users:[]
  },
  mounted(){
     this.loadData();
  },
  methods:{
     loadData:function(){
  axios.get('https://jsonplaceholder.typicode.com/users').then(res=>{
       if(res.status==200){
         this.users=res.data;
       }
     }).catch(err=>{
         console.log(err)
     });
     }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<div id="app">
 <ol>
    <li v-if="users.length>0" v-for="user in users">
      {{ user.name }}
    </li>
  </ol>
</div>

Upvotes: 9

Pedro Henrique
Pedro Henrique

Reputation: 11

In methods you have to use arrow functions syntax in callback functions, to keep your data property accessible. When you declare the function with normal syntax, you add a "child scope" and this.components in your callback refers to "this" inside you callback function.

Change your method to:

loadData() {
            axios.get('/api/continents')
              .then((response) => {
                // handle success
                console.log(response.data);
                //now this refers to your vue instance and this can access you data property
                this.continents = response.data;
              })
              .catch((error) => {
                // handle error
                console.log(error);
              })
              .then(() => {
                // always executed
              });
        },

Upvotes: 1

Related Questions