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

Posted 2023-02-22

【中文标题】在 Laravel Inertia Vue 中初始化服务器端多列排序

【英文标题】：Initialize server side multi-column sorting in Laravel Inertia Vue

【发布时间】：2021-07-13 03:03:37

【问题描述】：

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

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

路线

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

控制器

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>

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

【问题讨论】：

您好，在 *** 中，我们避免给出基于意见的答案（因此，“这是最佳实践”之类的答案是不可接受的，除非它是框架的标准）。如果您需要审查您的代码并可能提出改进建议，请在Code Review 上发帖。但是，如果您的代码无法正常工作，这将有助于显示任何错误或告诉我们您期望得到什么以及您将得到什么，以便我们可以更准确地诊断问题。 （是 Laravel 问题还是 Vue 问题？）

@WiGeeky 嘿，感谢您的回复，好的，我明白了，我一定会记住这一点。它会在 Laravel 控制器中设置，我只需要相应地设置 Vue 组件。

【参考方案1】：

最近我遇到了同样的问题，如果你还在寻找解决方案，你可以去。

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

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

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

        ,

然后在控制器中，你必须检查排序是否为空设置一个默认值

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

最后在使用分页之后

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

:)

【讨论】：

感谢您的回答，我一定会试一试的:)