首页 > 解决方案 > 如何将 axios 结果附加到 vuejs 数据表?

问题描述

我是 vuejs 的新手。我有一个 laravel+vue 项目,其中我使用 vuejs 数据表来显示所有用户。我被困在为什么数据没有附加到 datatable :data 属性上,我还尝试<div v-for="user in users">{{ user.name }}</div>使用 for 循环在标签中显示数据,然后它正在显示,但是当我在数据表中使用 for 循环时,循环不会停止并且还有控制台中没有错误。请告诉我解决方案并提前感谢。这是我的代码。

用户控制器.php

public function index()
{
    return response()->json(['users' => User::all()], 200);
}

用户组件.vue

<template>
    <datatable :columns="columns" :data="users"></datatable>
</template>

<script>
    export default()
    {
        data()
        {
           return {
             columns: [
               {label: 'id', field: 'id'},
               {label: 'Name', field: 'name'},
               {label: 'Email', field: 'email'}
             ],
             users: []
        };
     },
     mounted()
     {
       this.getUsers();
     },
     methods:
     {
       getUsers()
         {
            axios.get('api/user')
                .then(res => this.users = res.data.users)
                .catch(err => console.log(err))
         },
      }
    }
</script>

标签: laravelvue.js

解决方案


推荐阅读