Товарищи, здравствуйте! Прошу помощи. Делаю диплом: spa приложение на vue js 2 и laravel (rest api). Так вот столкнулся с проблемой фильтрации данных... Как вообще лучше фильтровать данные в spa - приложениях? На клиенте? Например, используя функцию javascript "filter" или посылать запросы к серверу и обновлять данные? Как это, например, реализовано в ВК, в разделе "друзья". Имеется вот такой попап, в который подгружаются некоторые пользователи и как их можно отфильтровать? На клиенте или на сервере? Заранее всем большое спасибо!
2 ответа
Если данные хранятся в моделе то можно сделать scopeSearch и запилить ее в index, вашего REST маршрута, тогда если прилетает пустой запрос он выдаст начальный список, а если будут GET параметры или POST тут не важно, тогда он их отфильтрует и отдаст вот пример:
модель User:
function scopeSearch($query,\Illuminate\Http\Request $request){
if($request->has('role')) {
$role = Role::find($request->get('role'));
$usersID = $role->users()->pluck('id')->toArray();
$query->whereIn('id',$usersID);
}
if($request->has('id')) {
$query->where('id','like','%'.$request->get('id').'%');
}
if($request->has('name')) {
$query->where('name','like','%'.$request->get('name').'%');
}
if($request->has('email')) {
$query->where('email','like','%'.$request->get('email').'%');
}
if($request->has('phone')) {
$query->where('phone','like','%'.$request->get('phone').'%');
}
return $query;
}
по желанию еще каждую можно обернуть в проверку прав, если приложение от этого зависит
А вот пример вашего индекса:
/**
* Список пользователей
*
* @param Request $request
* @return \Illuminate\Http\JsonResponse
*/
function index(Request $request)
{
$user = User::search($request)->paginate(50);
return response()->json($user);
}
На laravel делаете api для выборки пользователей по параметрам (т.е. шлёте например возраст и передаете все поля с данным возрастом массивом или объектом). Можете через v-for
сделать вывод нужных данных на страницу. Далее на vue.js привязываете нужное поле к объекту, формирующему запрос, и по событию введения данных в это поле должен произойти запрос на ваше api. Когда пришёл ответ меняете данные привязанные к v-for и вуаля - реактивно изменился контент... Объяснил наверное не слишком доходчиво, но как смог...