4
votes

Laravel 5.7 - Comment récupérer des données depuis une API avec un axios.get?

J'essaye d'obtenir des données d'une API dans un composant Laravel Vue. J'obtiens cette erreur dans la console:

TypeError: Impossible de définir la propriété 'continents' sur undefined

Que me manque-t-il?

Voici mon 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>

laravel vue.js laravel-5

0 commentaires

3 Réponses :

1
votes

Vous devez utiliser la fonction fléchée dans votre appel car cette instance n'est pas disponible dans votre. puis fonction de promesse . Essayez donc comme ci-dessous.

En savoir plus sur les fonctions fléchées ici .

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

0 commentaires

1
votes

Dans les méthodes, vous devez utiliser la syntaxe des fonctions fléchées dans les fonctions de rappel, pour garder votre propriété de données accessible. Lorsque vous déclarez la fonction avec une syntaxe normale, vous ajoutez une "portée enfant" et this.components dans votre rappel fait référence à "this" dans votre fonction de rappel.

Changez votre méthode en:

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

0 commentaires

8
votes

Voici la démonstration de fonctionnement simple de axios.get request

<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>

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

0 commentaires