Laravel Vue.js

Filter posts based on category using Laravel 5.5 and Vue js

Filter posts based on category using Laravel 5.5 and Vue js

Hello Everyone, This is a simple application which going to explain the concept of how to filter the posts based in category click using laravel 5.5 and vue js. Laravel 5.5 by default come with Vue js. There are 3 presets available in laravel 5.5 1. bootstrap, Vue and React. Here we are going to see with Vue js.

Step 1

Create 2 tables
1. Categories
2. Posts

2017_09_26_062649_create_category_table.php

2017_09_26_063729_create_posts_table.php

Step 2 : Run migration to create tables to database

Step 3

Create dummy categories to categories table

Step 4

Create dummy posts with reference of category id

Step 5

Make Category.php and Post.php Models

Category.php

Post.php

Step 6

Write route and controller to return data

routes/web.php

Http/Controllers/HomeController.php

Step 7

Write a code to fetch post and categories at your app.js

app.js

Step 8

Write a blade to display contents in front end

Step 9

In above blade you can see “filterByCategory()” function which going to help us to filter the posts

Write a filter function inside “methods” at your app.js

Step 10

now run your app and based on user click you can filter the data

Thats it. It will help someone else.

Output

Filter posts based on category using Laravel 5.5 and Vue js