I created a dynamic web application using Vue.js and Flask that allows for CRUD operations. The app utilizes axios for making API requests. One of the core components of my application fetches data from a database and presents it in a table format. To retrieve all records from the database, I use the base path:
localhost:5000/expenses
In order to filter the displayed data, I implemented two buttons that trigger modals. The first modal requires users to input a start date and an end date, which then sends a GET request to:
localhost:5000/expense?startDate=2020-04-10&endDate=2020-04-21
The backend, powered by Flask, filters the data based on the specified date range before returning it to be shown in the table.
The second modal provides a dropdown menu for selecting a category to filter the data further. This second GET request only queries the backend at:
localhost:5000/expense?category=food
To combine both filtering options in the GET request URL, the desired format would be:
localhost:5000/expense?startDate=2020-04-10&endDate=2020-04-21&category=food
The method responsible for sending the GET request is called getExpenses() and accepts three named parameters:
getExpenses({
filteredCategory,
filteredStartDate,
filteredEndDate,
} = {}) {
const path = 'http://localhost:5000/expenses';
axios.get(path, {
params: {
category: filteredCategory,
startDate: filteredStartDate,
endDate: filteredEndDate,
},
})
This method is invoked independently when each modal form is submitted:
onSubmitCategory(evt) {
evt.preventDefault();
this.$refs.addCategoryModal.hide();
const filteredCat = this.addCategoryForm.category;
this.getExpenses({
filteredCategory: filteredCat,
});
this.initForm();
onSubmitDate(evt) {
evt.preventDefault();
this.$refs.addDateRangeModal.hide();
const filtStartDate = this.addDateRangeForm.startDate;
const filtEndDate = this.addDateRangeForm.endDate;
this.getExpenses({
filteredStartDate: filtStartDate,
filteredEndDate: filtEndDate,
});
this.initForm();
How can I preserve the state to enable filtering on top of previously filtered data? Is there a way to maintain state even after page refresh so that the last query isn't lost? Currently, upon refreshing, the page defaults back to the base path and displays all data instead of retaining the previous filter. Any suggestions are appreciated!