Как получить данные по вызову axios в смонтированном компоненте?

Question

Я работаю над получением данных из API, выполняя вызов API с помощью Axios.Но мои попытки получить данные из API не увенчались успехом.Как заставить это работать?

export default { 
    mounted() {
         this.fetchData()
    },
    data() {
       return {
         users:[]
    }    
  },

  methods: {
     fetchData(){
        axios.get('api/person')
              .then(response => (this.users= response.data))
              .catch(error => console.log(error));
      }
   }, 
}

В ExampleComponent есть эти строки

<template>
 ...
 <div>{{users.name}}</div>
 <div>{{users.ip}}</div>
 ...
</template>

В api.php

Route::get('/person', function() {
    $users = DB::table('user_info')->select('ip','name')->get();
     return $users;
 });

Запуск php artisan tinker Я сделал

 DB::table('user_info')->select('ip','name')->get();

Я получил все свои данные из БД (пользователи с именами и IP-адресами).В консоли разработчика я вижу свои данные в ответной вкладке.Но это ничего на моей странице.

Answer 1

Проблема в vue: в шаблоне должны быть {users.ip} и {users.name}.

Answer 2

вам нужен v-for:

<div v-for="user in users">
 <div>{{user.name}}</div>
 <div>{{user.ip}}</div>
</div>

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

Answer 3

так я получаю свои данные.

<script>
  export default {
   data() {
     return {
       properties: []
      }
   },
   methods: {
     loadproperty(){
       axios.get('allhouses').then(response => this.properties = response.data);
      },
   },
   mounted() {
    this.loadproperty();
    }
   }

</script>