无法将所需参数传递到 URL - Laravel Inertia Vue答案

【问题标题】：Unable to pass the required parameters into the URL - Laravel Inertia Vue无法将所需参数传递到 URL - Laravel Inertia Vue
【发布时间】：2021-07-14 18:13:57
【问题描述】：

我正在构建一个具有多列排序功能的数据表。到目前为止，排序功能运行良好，我无法获得的是正确的参数到 url。由于我只是将$sorts 作为道具传递给组件，因此我使用this.$inertia.get 将$sorts 传递回控制器，控制器将返回排序后的数据。但是由于在 Inertia get 方法中传递了sorts: this.sorts，它返回的 url 查询为http://127.0.0.1:8000/users?sorts[name]=asc。如何在 Inertia get 方法中获取所需的参数，以便我得到一个 url 查询，如http://127.0.0.1:8000/users?sort_field=name&sort_direction=asc 并传递$sorts，以便返回预期的数据。

控制器

public $sorts = [];

public function initalizeSortingRequest()
{
    $this->sorts = request()->get('sorts', $this->sorts);
}

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

组件

<script >
    methods: {
        sortBy(field) {
            if (!this.sorts[field]) {
                this.sorts[field] = 'asc';
            } else if (this.sorts[field] == 'asc') {
                this.sorts[field] = 'desc';
            } else {
                delete this.sorts[field];
            }

            let route = this.route('users.index', {
                sorts: this.sorts
            })
            this.$inertia.get(route, {}, {
                only: ['usersData'],
                preserveState: true,
                preserveScroll: true
            })
        }
    } 
</script>

【问题讨论】：

标签： javascript laravel vue.js inertiajs

【解决方案1】：

我最近做了一个关于使用 InertiaJS 和 Laravel 构建数据表的截屏视频。
它的要点是：

import AppLayout from '@/Layouts/AppLayout';
import Pagination from '../Jetstream/Pagination';
import { pickBy, throttle } from 'lodash';

export default {
  components: {
    AppLayout,
    Pagination,
  },
  props: {
    users: Object,
    filters: Object,
  },
  data() {
    return {
      params: {
        search: this.filters.search,
        field: this.filters.field,
        direction: this.filters.direction,
      },
    };
  },
  methods: {
    sort(field) {
      this.params.field = field;
      this.params.direction = this.params.direction === 'asc' ? 'desc' : 'asc';
    },
  },
  watch: {
    params: {
      handler: throttle(function () {
        let params = pickBy(this.params);

        this.$inertia.get(this.route('users'), params, { replace: true, preserveState: true });
      }, 150),
      deep: true,
    },
  },
};

然后在控制器索引动作中：

public function index()
{
    request()->validate([
        'direction' => ['in:asc,desc'],
        'field' => ['in:name,city']
    ]);

    $query = User::query();

    if (request('search')) {
        $query->where('name', 'LIKE', '%'.request('search').'%');
    }

    if (request()->has(['field', 'direction'])) {
        $query->orderBy(request('field'), request('direction'));
    }

    return Inertia::render('Users', [
        'users' => $query->paginate()->withQueryString(),
        'filters' => request()->all(['search', 'field', 'direction'])
    ]);
}

您可以观看截屏视频here.

【讨论】：