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

我正在构建一个具有多列排序功能的数据表。到目前为止，排序功能运行良好，但我无法在url中获得正确的参数。由于我只是将

$sorts

作为道具传递给组件，因此我使用

this.$industry.get

将

$sorts

传递回控制器，控制器返回已排序的数据。但是由于在惯性get方法中传递了

sorts:this.sorts

，它将url查询返回为

http://127.0.0.1:8000/users?sorts[name]=asc

。如何在惯性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>

方法：{
排序（字段）{
如果（！this.sorts[字段]）{
this.sorts[field]=“asc”；
}else if（this.sorts[field]=“asc”）{
this.sorts[field]=“desc”；
}否则{
删除此项。排序[字段]；
}
让route=this.route（'users.index'{
排序：这个。排序
})
这个。$INITORY.get（路径，{}{
仅限：['usersData']，
国家：是的，
保存卷轴：正确
})
}
} 

我最近做了一个关于使用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'])
    ]);
}

你可以看电影