Laravel 9 and Vue – Search and Filter Data

In this article, we will explore how to create a search and filter functionality in a Laravel 9 application using Vue.js. This feature allows users to easily search for specific data and filter it based on different criteria.

Setting up Laravel 9 and Vue

Before we can implement the search and filter functionality, we need to set up a Laravel 9 application and integrate Vue.js. First, make sure you have Laravel 9 installed in your system. If not, you can install it using Composer.

    composer create-project --prefer-dist laravel/laravel myapp
    

Next, install Vue.js using npm:

    npm install vue
    

Now, we can start building our application.

Creating a Data Table

Let’s say we have a database table called “products” and we want to display this data in a table on the frontend. We can use Vue to fetch the data from the API and display it in a table. First, create a component to display the table:

    <template>
        <div>
            <input type="text" v-model="search" placeholder="Search...">
            <table>
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Price</th>
                        <th>Category</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="product in filteredProducts">
                        <td>{{ product.name }}</td>
                        <td>{{ product.price }}</td>
                        <td>{{ product.category }}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </template>

    <script>
        export default {
            data() {
                return {
                    search: '',
                    products: []
                }
            },
            computed: {
                filteredProducts() {
                    return this.products.filter(product => {
                        return product.name.toLowerCase().includes(this.search.toLowerCase());
                    });
                }
            },
            mounted() {
                // fetch data from API and populate the 'products' array
            }
        }
    </script>
    

In the above code, we have created a table with a search input at the top. We are using Vue’s computed property to filter the products based on the search input. The “filteredProducts” property returns only those products that match the search criteria.

Implementing Search and Filter Functionality

Now, we need to implement the actual search and filter functionality in our Laravel backend. We can create an API endpoint in Laravel to fetch the products data and apply search and filter criteria.

    // routes/api.php

    Route::get('/products', 'ProductController@index');
    

    // ProductController.php

    public function index(Request $request)
    {
        $products = Product::query();

        if ($request->has('q')) {
            $q = $request->input('q');
            $products->where('name', 'like', "%$q%");
        }

        if ($request->has('category')) {
            $category = $request->input('category');
            $products->where('category', $category);
        }

        return $products->get();
    }
    

In the above code, we have created an API endpoint to fetch the products data. We are using request query parameters to apply search and filter criteria. We check if the “q” parameter is present and then filter the products based on the name. Similarly, we can filter the products based on the category.

Conclusion

By integrating Laravel 9 with Vue.js, we can create an efficient search and filter functionality in our application. Users can easily search for specific data and filter it based on different criteria, improving the overall user experience.