CODEWITHSUNDEEP
laravellaravel-5vue.jsvuejs2
Nacim Idjakirene
Nacim Idjakirene

Reputation: 1931

How to use Vue js to filter Laravel data collection then render them?

I have a simple Laravel web site with à limited number of products (actually 15 smartphones) to display and there is no pagination needed. In the home page of the web site, ALL the products are automatically displayed.

My problem is that i would like the user can filter those data with à range filter on price, OS and more... So how can i use Vue js to filter data already returned from the database with Laravel Query builder by keeping SEO in mind ?

Upvotes: 1

Views: 1385

Answers (1)

Daniel Waghorn
Daniel Waghorn

Reputation: 2985

If your products are in the form of an array of objects, as a Laravel collection would be when serialised to JSON you can use a library like collect.js to filter your products in the same way as you would with Laravel collections.

The library is based off of Laravel collections actually has a near identical API, so you'll immediately be familiar with the available methods.

An example for your use case may be to filter e.g. OS:

import collect from 'collect.js';

return collect(products).where('os', 'Android').items;

A full listing of all of the available methods can be found on the project's GitHub README.

Upvotes: 2

Related Questions