Hi Artisan,
In this tutorial, i will guide you step by step how to create vue filter list example in laravel 7. Filter is very important feature for website. Many website you will see that filter is a required thing.
Now in this tutorial we are going to learn how we can create vue filter list using laravel using vue filter component. In this tutorial i will create a post table which contains a active field.
There is a select box when a user select value like active post or in active post, then the required filter data will be showed using vue js. I will use vue js to to create vue js dropdown selected event. I will create a FilterCompoent and load it inside filter blade file. Le'ts start.
Step 1: Install Laravel
First of all, we need to get fresh Laravel 6 version application using bellow command because we are going from scratch, So open your terminal OR command prompt and run bellow command:
composer create-project --prefer-dist laravel/laravel blog
Step 2: Make auth
We will generate authentication to get bootstrap design. Nothing else. Laravel's laravel/ui
package provides a quick way to scaffold all of the routes and views you need for authentication using a few simple commands:
composer require laravel/ui --dev
php artisan ui vue --auth
Step 3: Setup Migration
To create post like system, run below command to create a post model
php artisan make:model Post -fm
after doing it open your posts migration file and paste this following code.
Schema::create('posts', function (Blueprint $table) {
$table->bigIncrements('id');
$table->string('title');
$table->string('slug');
$table->unsignedBigInteger('user_id');
$table->unsignedBigInteger('active');
$table->unsignedBigInteger('like')->default(0);
$table->timestamps();
});
Now run php artisan migrate to migrate our table.
Generate some dummy data
To generate some dummy data, open PostFactory and paste below code
database/factories/PostFactory.php
/** @var \Illuminate\Database\Eloquent\Factory $factory */
use App\Post;
use Faker\Generator as Faker;
$factory->define(Post::class, function (Faker $faker) {
return [
'title' => $faker->sentence,
'slug' => \Str::slug($faker->sentence),
'user_id' => 1,
'active' => $faker->numberBetween(0,1)
];
});
and then run below commad to generate fake data using faker.
php artisan tinker
//and then
factory(\App\Post::class,20)->create()
exit
Step 4: Setup Route
routes/web.php
//filter
Route::get('filter','FilterController@index');
Route::post('filter','FilterController@getpost');
Step 5: Setup Model
Now open Post model, and paste this following code.
app/Post.php
namespace App;
use Illuminate\Database\Eloquent\Model;
class Post extends Model
{
protected $guarded = [];
}
Step 6: Setup Controller
Now open PostController and paste this following code.
Read also : Simple Like System in Laravel 6 using Vue Js
app/Https/Controller/PostController.php
namespace App\Http\Controllers;
use App\Post;
use Illuminate\Http\Request;
use Facades\App\Repository\Posts;
class FilterController extends Controller
{
public function index()
{
$posts = Posts::allPosts();
return view('post.filter',['posts' => $posts ]);
}
public function getpost(Request $request)
{
$posts=Post::where('active',$request->sort)->get();
return response()->json([
'post'=>$posts
]);
}
}
Step 7: Install Vue dependency and edit configurations
Now, go inside the project folder and install the frontend dependencies using the following command.
npm install
now open this followng file and paste this code. Make an asstes folder inside resources folder and copy js and sass folder inside it. Thats all. We need it to setup our laravel mix.
webpack.mix.js
const mix = require('laravel-mix');
mix.js('resources/assets/js/app.js', 'public/js/app.js')
.sass('resources/assets/sass/app.scss', 'public/css/app.css');
now create a FilterComponent to create our post and paste this code.
resources/assets/js/components/FilterComponent.vue
now open app.js file and paste this followng code.
resources/assets/js/app.js
require('./bootstrap');
window.Vue = require('vue');
Vue.component('filter-component', require('./components/FilterComponent.vue').default);
const app = new Vue({
el: '#app',
});
Step 8: Setup blade file
Now time to setup our blade file. open resources/layouts/app.php and paste this following code.
resources/views/layouts/app.blade.php
Now open resources/views/post/filter.blade.php file and paste this code.
resources/views/post/filter.blade.php
then visit this following url, Then you see all the post we have created. Then open a post and select value to see vue filter list in laravel.
Preview: all post filter with active
Preview: all post filter with inactive
Hope you enjoy this tutorial and hope it will work for you
Read also : Real Time Chat App with Laravel 6 Vue Js and Pusher
If you find any error please share with me, i will try to solve. That's it.
#filtering #laravel-6 #filter #vue-js #laravel #tutorial