如何通过axios调用在已安装的组件中获取数据? [英] How to get data by axios call in a mounted component?

问题描述

我正在通过使用axios执行api调用来从API获取数据.但是我从api获取数据的尝试并不成功.如何使其工作?

I'm working on getting data from API by performing api call with axios. But my attempts to get data from api aren't succesful. How to make it work?

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中有以下几行

In ExampleComponent have these lines

<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手工艺修补匠

Running php artisan tinker I did

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

我从DB(具有名称和IP的用户)那里获得了所有数据. 在开发控制台中，我在响应"选项卡中看到了我的数据.但这不在我的页面中.

I've got all my data from DB(users with names and IP's). In the dev console, I see my data in response tab. But it is nothing in my page.

推荐答案

您需要使用v-for:

you need v-for:

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

因此，每个用户都会显示信息.

so for every users you will show info.

这篇关于如何通过axios调用在已安装的组件中获取数据?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！