Laravel 5.7 - Как получить данные из API с помощью axios.get?

Question

Я пытаюсь получить данные из API в компоненте Laravel Vue.Я получаю эту ошибку в консоли:

TypeError: Невозможно установить свойство 'continents' из неопределенного

Что мне не хватает?

Это мойкод:

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

Answer 1

В методах вы должны использовать синтаксис функций стрелок в функциях обратного вызова, чтобы сохранить доступность вашего свойства данных.Когда вы объявляете функцию с обычным синтаксисом, вы добавляете «дочернюю область», и this.components в вашем обратном вызове ссылается на «this» внутри вашей функции обратного вызова.

Измените свой метод на:

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

Answer 2

Вот простая рабочая демонстрация axios.get запроса

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>

Answer 3

Вы должны использовать функцию стрелки в вашем вызове, так как экземпляр этого не доступен в вашем. затем функция обещания . Попробуйте, как показано ниже.

Подробнее о функциях стрелки здесь .

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