Looking to streamline the data filtering process for a car website where API queries involve parameters like brand, color, price, and fuel.
https://i.sstatic.net/OYUxs.png
The mock API being used is located at
https://api.example.com/api/v1/it/vehiclesSample query format:
https://api.example.com/api/v1/it/vehicles?filter[transmission]=manual&filter[body]=van,suvI initiated the process by:
import apiClient from '~/services/VehiclesService';
export default {
fetchVehicles: async ({ commit }) => {
const response = await apiClient.get('/vehicles').catch(error => {
console.log(error);
return error;
});
commit('SET_VEHICLES', response.data.data);
}
};
implemented in vuejs framework:
<v-list>
<v-list-item>
<v-list-item-content>
<v-list-item-title>
<v-checkbox class="ma-0 pa-0" v-model="c_v_b_a" :label="`Audi` + ' ' + c_number"></v-checkbox>
<v-checkbox class="ma-0 pa-0" v-model="c_v_b_b" :label="`Bmw` + ' ' + '(11)'"></v-checkbox>
<v-checkbox class="ma-0 pa-0" v-model="c_v_b_f" :label="`Fiat` + ' ' + '(13)'"></v-checkbox>
</v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list>
computed: {
filterByTerm(brand) {
if (this.c_v_b_a) {
this.c_v_b_b = false;
this.c_v_b_f = false;
return this.vehicles.filter(car => {
return car.title.toLowerCase().includes("audi");
});
} else if (this.c_v_b_b) {
this.c_v_b_a = false;
this.c_v_b_f = false;
return this.vehicles.filter(car => {
return car.title.toLowerCase().includes("bmw");
});
} else if (this.c_v_b_f) {
this.c_v_b_b = false;
this.c_v_b_a = false;
return this.vehicles.filter(car => {
return car.title.toLowerCase().includes("fiat");
});
} else {
return this.vehicles;
}
}
}
However, this approach doesn't fully align with my goal of efficient data filtering. Are there better ways to implement filtering with API queries?
Any suggestions or tips would be greatly appreciated. Thank you!