Laravelのパラメータ付きURLのページネーションをVueで使う場合
Controller.php
//入力項目によりクエリ動的生成
$q = Job::query();
if (!empty($city_id[0])) {
$q->whereIn('city_id', $city_id);
}
if (!empty($category_id[0])) {
$q->whereIn('category_id', $category_id);
}
if (!empty($status_id[0])) {
//dd($status_id);
$q->whereIn('status_id', $status_id);
}
if (!empty($feature_id[0])) {
$q->whereHas('feature', function ($query) use ($feature_id) {
$query->whereIn('feature_id',$feature_id);
});
}
//検索パラメータに戻す
$params = array(
'city_id' => $request->city_id,
'category_id' => $request->category_id,
'status_id' => $request->status_id,
'feature_id' => $request->feature_id,
);
//appends
$jobs = $q->with('User:id,name','Category','City','Status','Feature')->latest()->paginate(1)->appends($params);
vue
<template>
<div>
<ul class="pagination">
<li v-for="(link, index) in jobs.links" v-if = "link.active === true" class="active"><a :href='link.url'>{{index}}</a></li>
<li v-else-if = "link.label === `« Previous`" v-show="link.url"><a :href='link.url'>前へ</a></li>
<li v-else-if = "link.label === `Next »`" v-show="link.url"><a :href='link.url'>次へ</a></li>
<li v-else><a :href='link.url'>{{index}}</a></li>
</ul>
</div>
</template>