用 vueJS 填充数据表答案

【问题标题】：fill datatable with vueJS用 vueJS 填充数据表
【发布时间】：2021-06-22 14:48:55
【问题描述】：

我正在准备用 vueJS 和数据库中的所有数据填充我的数据表。我正在使用这个库：

https://jamesdordoy.github.io/laravel-vue-datatable

如果我在我的控制器中使用它就可以了：

User::all()
return response()->json($query);

在我的组件中：

<div class="">
            <data-table :data="data" :columns="columns" @on-table-props-changed="reloadTable"></data-table>
        </div>

此库包含 sortBy、orderBy、按名称搜索等方法...使用此：

use JamesDordoy\LaravelVueDatatable\Http\Resources\DataTableCollectionResource;
public function index(Request $request)
    {   
        $length = $request->input('length');
        $sortBy = $request->input('column');
        $orderBy = $request->input('dir');
        $searchValue = $request->input('search');
        
        $query = User::eloquentQuery($sortBy, $orderBy, $searchValue);

        $data = $query->paginate($length);
        
        return new DataTableCollectionResource($data);
    }

但如果我在 laravel 8 的控制器中使用它，我会返回：

Call to undefined method App\Models\User::eloquentQuery()

我不知道这是否意味着使用 get(), all()。

另外，如果我不使用这个并且我手动进行所有搜索，例如：

if(isset($sortBy)){
  $query = User::all()->sortBy($sortBy);

  $data = $query->paginate($length);
}
return response()->json($query);

回复我：

Method Illuminate\Database\Eloquent\Collection::paginate does not exist

如果我删除分页并返回 $query，则在网络选项卡中的 Web 浏览器控制台中返回我的所有数据，但我的表是空的...

对于后端，我正在使用 laravel-8

在我的网络浏览器控制台中返回此消息：

Invalid prop: type check failed for prop "data". Expected Object, got Array

如果我将组件中的:data 更改为:items Web 浏览器控制台中的错误消失

我不明白我做错了，因为在一种情况下我可以填满我的桌子，而在另一种情况下则不能......

感谢阅读并帮助我

【问题讨论】：

标签： vue.js vuejs2 laravel-8 vue-data-tables

【解决方案1】：

我用这个来解决我的问题：

$query = \DB::table('users')->orderBy($sortBy, $order)->paginate(10);

我不能用模型

【讨论】：