多条件过滤器

时间:2019-09-23 10:25:01

标签: javascript vue.js

我正在使用多个复选框在booksFilter函数中对其进行过滤。

data() {
    return {
      books:[
        {
          name:"Book1",
          price:2000
        },
        {
          name:"Book2",
          price:2000
        },
        {
          name:"Book3",
          price:2000
        },
        {
          name:"Book1",
          price:1000
        }
      ],
      filters:{
        options:[]
      }
    }
  },
  computed:{

    booksFilter(){

      return this.books.filter(x => {

        if(this.filters.options.length>0){

          return this.filters.options.indexOf(0)!=-1 && x.price>1000
          || this.filters.options.indexOf(1)!=-1 && x.name == "Book1";

        }
        else{

          return true;

        }  
      })
    }

https://codepen.io/Aksultan/pen/NWKeZGg

同时使用两个复选框时,它应该只返回一本书,但是现在它会返回全部数据。

谢谢

3 个答案:

答案 0 :(得分:1)

那又怎么样:

booksFilter() {
  return this.books.filter(x => {
    if (this.filters.options.length> 0) {
      boolean condition = true; 
      if (this.filters.options.indexOf(0)!=-1) {
         conditon = conditon && x.price>1000
      }

      if (this.filters.options.indexOf(1)!=-1) {
         conditon = conditon && x.name == "Book1";
      }

      return condition;
    else {
      return true;
    }  
  })
}

希望它能解决您的情况。

答案 1 :(得分:0)

您的过滤器似乎不正确。

为简单起见,我分为2个连续的过滤器,每个复选框一个:

computed:{
    booksFilter(){
      return this.books.filter(x => {
        if(this.filters.options.length && this.filters.options.indexOf(0)!=-1){
          return x.price>1000;
        }
        else{
          return true;
        }  
      }).filter(x => {
        if(this.filters.options.length && this.filters.options.indexOf(1)!=-1){
          return x.name == "Book1";
        }
        else{
          return true;
        }  
      })
    }
  }  

答案 2 :(得分:0)

像这样更新您的逻辑以获得结果:

return (this.filters.options.indexOf(0) === -1 || x.price > 1000)
  && (this.filters.options.indexOf(1) === -1 || x.name === "Book1");

this.filters.options.indexOf(0) === -1 || x.price > 1000-未选择过滤器0,返回OR的真price过滤器
AND
this.filters.options.indexOf(1) === -1 || x.name === "Book1"-未选择过滤器1,通过OR返回真name过滤器