在Laravel Inertia Vue中初始化服务器端多列排序

Question

我正在尝试在 Laravel Inertia Vue 中创建服务器端排序。 它将作为多列排序工作，目前我无法在项目中暗示它。 使用 Livewire 堆栈只需几分钟。 但是，如果是 Inertia Vue，则无法重新创建它。 请帮助我的人。 等待回归。

这是我到目前为止所做的，这是我迄今为止所做的，

路线

Route::put('/users/{column}', [UserController::class, 'sortBy'])->name('users.set-field');

Controller

class UserController extends Controller 
{
    public $sorts = [];

    public function index(Request $request) {
        $rowsQuery = User::query()->select('id', 'name', 'email', 'created_at')
                                  ->withRole();

        $rows = $this->applySorting($rowsQuery);

        return Inertia::render('Backend/Management/AudienceManagement/Users/Index', [
            'usersData' => $query,
            'sortingData' => $this->sorts
        ]);
    }

    public function sortBy($column) {
        if (! isset($this->sorts[$column])) return $this->sorts[$column] = 'asc';
        if ($this->sorts[$column] === 'asc') return $this->sorts[$column] = 'desc';
        unset($this->sorts[$column]);
    }

    public function applySorting($query) {
        foreach($this->sorts as $column => $direction) {
            $query->orderBy($column, $direction);
        }
        return $query;
    }
}

零件

<template>
    <!-- Data Table -->
    <data-table-base>
        <template #head>
            <data-table-heading class="pr-0">ID</data-table-heading>
            <data-table-heading sortable :direction="sorts['name'] ?? null" @click="sortBy('name')">Name</data-table-heading>
            <data-table-heading>Email</data-table-heading>
            <data-table-heading>Role</data-table-heading>
            <data-table-heading sortable :direction="sorts['created_at'] ?? null" @click="sortBy('created_at')">Date</data-table-heading>
        </template>
    </data-table-base>
</template>

<script>
    import DataTableBase from '@/Components/Custom/Table/Base'
    import DataTableHeading from '@/Components/Custom/Table/Heading'
    import axios from 'axios'

    export default {
        components: {
            DataTableBase,
            DataTableHeading
        },

        props: {
            usersData: {
                type: Object
            },
            sortingData: {
                type: Array
            }
        },

        data() {
            return {
                sorts: this.sortingData
            }
        },

        methods: {
            sortBy(column) {
                axios.put(this.route('users.set-field', {
                    column: column
                })).then((response) => {
                    console.log(response);
                });
            }
        }
    }
</script>

上述方法是否正确？ 我是否朝着正确的方向前进？ 如果是，我应该如何 go 领先它。 请帮助某人。

Answer 1

最近我遇到了同样的问题，如果你仍然在这里寻找解决方案，你 go。

如果你使用分页，你不需要创建额外的 API，你可以使用 GET 来显示数据。

在您的组件中使用 Inertia 更好，类似这样的 wuold 工作：

setOrderBy(orderBy) {
            this.currentContactSortColumn = orderBy
            this.$inertia.get(route('show'), {
                'sort': orderBy,
                //'direction': 'asc'
            }, {
                preserveState: true
            })

        },

然后在 controller 中，你必须检查排序是否为空设置默认值

(empty($request->sort)) ? $request->sort = 'default_value' : '';

最后在使用分页之后

$contacts->appends(['sort' => $request->sort]);

:)