Vue.js 多个模态中的多个过滤器

Posted 2023-02-23

【中文标题】Vue.js 多个模态中的多个过滤器

【英文标题】：Vue.js Multiple Filters in Multiple Modals

【发布时间】：2020-08-04 21:03:25

【问题描述】：

我使用 Vue.js 和 Flask 构建了一个 CRUD 应用程序。我也在使用axios。我的应用程序有一个组件，它从数据库中获取数据并将其显示在表格中。基本路径从位于以下位置的数据库中获取所有记录：

localhost:5000/expenses

我创建了两个使用模态过滤数据的按钮。第一个模式需要一个开始日期和一个结束日期，提交时会在以下位置发出获取请求：

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

Flask 然后查询按日期范围过滤的数据，并将数据返回到表中。

第二个模式允许您从下拉列表中选择一个类别，并执行另一个获取请求。但是这个请求并没有持久化之前的get请求，只在后端查询：

localhost:5000/expense?category=food

除非重置，否则我希望 get 请求同时过滤，即：

localhost:5000/expense?startDate=2020-04-10&endDate=2020-04-21&category=food

我的get请求是一个可以接受3个命名参数的方法：

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

并且在每个modal提交的时候独立调用：

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

什么是确保状态被保留并且我可以在之前过滤的数据之上进行过滤的最佳方式？另外，刷新网页时有没有办法保留状态？它当前返回基本路径并查询所有数据，而不是保留最后一个查询。谢谢！

【参考方案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,
    

祝你好运