Vue. js Несколько фильтров в нескольких модалах

Question

Я создал приложение CRUD, используя Vue. js и Flask. Я также использую топор ios. Мое приложение имеет один компонент, который получает данные из базы данных и отображает их в виде таблицы. Базовый путь получает все записи из базы данных по адресу:

localhost:5000/expenses

Я создал две кнопки, которые фильтруют данные с использованием модальных параметров. Первый модал принимает дату начала и дату окончания, а при отправке выполняет запрос get по адресу:

localhost:5000/expense?startDate=2020-04-10&endDate=2020-04-2

Flask, затем запрашивает фильтрацию данных по диапазону дат и возвращает данные в таблицу.

Второй модал позволяет вам выбрать категорию из выпадающего списка и выполняет другой запрос на получение. Тем не менее, этот запрос не сохраняется в предыдущем запросе get и запрашивает только бэкэнд по адресу:

localhost:5000/expense?category=food

Если сброс не выполнен, я бы хотел, чтобы запрос get отфильтровывался по обоим параметрам, т.е. 1014 * Мой запрос на получение - это метод, который может принимать 3 именованных параметра:

getExpenses({  
  filteredCategory,  
  filteredStartDate,  
  filteredEndDate,  
} = {}) {  
  const path = 'http://localhost:5000/expenses';  
  axios.get(path, {  
    params: {  
      category: filteredCategory,  
      startDate: filteredStartDate,  
      endDate: filteredEndDate,  
    },  
  })

И он вызывается независимо при отправке каждого модального сообщения:

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();

Каков наилучший способ гарантировать, что состояние сохранено и что я могу фильтровать поверх ранее отфильтрованных данных? Кроме того, есть ли способ сохранить состояние при обновлении веб-страницы? В настоящее время он возвращается к базовому пути и запрашивает все данные вместо сохранения последнего запроса. Спасибо!

Answer 1

Вы можете использовать vue -router для более эффективного способа обработки запросов.

Я использовал lodash для запроса Cherrypick

mounted() {
    this.getExpences();
},

methods: {
    // axios get function
    getExpences() {
        axios.get(path, this.getRequestQuery()).then((res) => {
             // Some response handling code here
        }).catch((e) => {
             // Some error handling code here
        })
    },

    // Call search on filter change event or put filters in form and call search on submit event
    search() {
        const query = this.mapFiltersToQuery();
        this.$router.push({ query });
    },

    // get query from $route.query + filters and create query for request
    getRequestQuery() {
        this.mapQueryToFilters();
        const query = this.mapFiltersToQuery();
        return query;
    },

    // combine queries from $route.query and your filters in your data
    mapQueryToFilters() {
        this.filters = { ...this.filters, this.$route.query };
    },

    // cherrypick from filters in data
    mapFiltersToQuery() {
        const nonEmptyFilters = _.pickBy(this.filters, v => (!_.isEmpty(v) || !!v));
        return nonEmptyFilters;
    },
},

watch: {
    '$route.query': {
        handler() {
            this.getExpences();
        },
        deep: true,
    }
}

Goodluck