Active Inactive Filter Example Using Vue Js In Laravel

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.