Question

我正在使用多个复选框在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

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

谢谢

Answer 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;
    }  
  })
}

希望它能解决您的情况。

Answer 2

您的过滤器似乎不正确。

为简单起见，我分为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;
        }  
      })
    }
  }

Answer 3

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

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过滤器

多条件过滤器

3 个答案: