在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]);

:)