Javascript 基于复选框数组的Vue JS筛选结果

我构建了一个Vue JS搜索组件，用于搜索和过滤物业网站的物业列表。搜索组件列在每个页面上，因此我可以使用URL搜索查询，将我带到主属性页，然后使用类似

this.$route.query.search的内容从我的查询中获取值并存储在变量中

属性数据来自一个JSON文件，基本上如下所示：

{
  "data": [
    {
      "id": 12,
      "sold": false,
      "isFeatured": true,
      "slug": "green-park-talbot-green-cf72-8rb",
      "address": "Green Park, Talbot Green CF72 8RB",
      "county": "Rhondda Cynon Taf",
      "price": "695000",
      "features": ["Modern fitted kitchen", "Integrated appliances", "Front and rear gardens"],
      "type": "Semi-Detached",
      "bedrooms": "3"
    }
}

/properties/?search=Address%20Here&type=Apartment&bedrooms=2&county=Maesteg

我的搜索查询如下：

{
  "data": [
    {
      "id": 12,
      "sold": false,
      "isFeatured": true,
      "slug": "green-park-talbot-green-cf72-8rb",
      "address": "Green Park, Talbot Green CF72 8RB",
      "county": "Rhondda Cynon Taf",
      "price": "695000",
      "features": ["Modern fitted kitchen", "Integrated appliances", "Front and rear gardens"],
      "type": "Semi-Detached",
      "bedrooms": "3"
    }
}

/properties/?search=Address%20Here&type=Apartment&bedrooms=2&county=Maesteg

这样就可以过滤每一个东西

其工作原理非常简单，在我的数据对象中，我有我的变量，这些变量获取每个查询并存储它们，如下所示：

data () {
    return {
      searchAddress: this.$route.query.search,
      searchType: this.$route.query.type,
      searchBedrooms: this.$route.query.bedrooms,
      searchCounty: this.$route.query.county
    }
}

然后在计算区域内有一个名为filteredProperties的过滤器，它过滤
v-for
中的属性，这里不需要显示：

computed: {
    filteredProperties: function(){
      return this.properties.filter((property) => {
        return property.address.match(this.searchAddress) && property.type.match(this.searchType) && property.bedrooms.match(this.searchBedrooms) && property.county.match(this.searchCounty)
      });
    }
  }

现在这项功能完全正常运行。。。但是，我现在需要将其修改为，而不是使用
下拉列表，这是您当前选择卧室数量或属性类型等的方式，我现在需要将属性类型替换为复选框，以便用户可以选择多个属性类型，并将其作为数组添加到URL中

我不太确定如何修改过滤器的这一部分，以便能够查找多种属性类型：

property.type.match(this.searchType)

非常感谢

更新

我最近尝试使用以下内容更新我的计算过滤器：

computed: {
    filteredProperties: function(){
      return this.properties.filter((property) => {

        return property.address.match(this.searchAddress) &&
        this.searchAddress.some(function(val){
          return property.search.match(val)
        }) &&

        property.type.match(this.searchType) &&
        this.searchType.some(function(val){
          return property.type.match(val)
        }) &&

        property.bedrooms.match(this.searchBedrooms) &&
        this.searchBedrooms.some(function(val){
          return property.bedrooms.match(val)
        }) &&

        property.county.match(this.searchCounty) &&
        this.searchCounty.some(function(val){
          return property.county.match(val)
        })

      });
    }
  }

computed: {
    filteredProperties: function(){
      return this.properties.filter((property) => {

        let searchTypeMatch;

        if (typeof this.searchType === "object") {
          searchTypeMatch = this.searchType.some(function(val){
            return property.type.match(val)
          })
        } else {
          searchTypeMatch = property.type.match(this.searchType)
        }

      return property.address.match(this.searchAddress) &&
        searchTypeMatch &&
        property.bedrooms.match(this.searchBedrooms) &&
        property.county.match(this.searchCounty)
      });
    }
  }

我需要搜索来处理和不处理URL查询

还尝试了if/else语句：

computed: {
    filteredProperties: function(){
      return this.properties.filter((property) => {
        return property.address.match(this.searchAddress) &&

        if (this.searchType.length > 1) {
          this.searchType.some(function(val){
            return property.type.match(val)
          })
        } else {
          property.type.match(this.searchType)
        } &&

        property.bedrooms.match(this.searchBedrooms) &&
        property.county.match(this.searchCounty)
      });
    }
  }

更新

我通过以下操作使其工作：

computed: {
    filteredProperties: function(){
      return this.properties.filter((property) => {

        return property.address.match(this.searchAddress) &&
        this.searchAddress.some(function(val){
          return property.search.match(val)
        }) &&

        property.type.match(this.searchType) &&
        this.searchType.some(function(val){
          return property.type.match(val)
        }) &&

        property.bedrooms.match(this.searchBedrooms) &&
        this.searchBedrooms.some(function(val){
          return property.bedrooms.match(val)
        }) &&

        property.county.match(this.searchCounty) &&
        this.searchCounty.some(function(val){
          return property.county.match(val)
        })

      });
    }
  }

computed: {
    filteredProperties: function(){
      return this.properties.filter((property) => {

        let searchTypeMatch;

        if (typeof this.searchType === "object") {
          searchTypeMatch = this.searchType.some(function(val){
            return property.type.match(val)
          })
        } else {
          searchTypeMatch = property.type.match(this.searchType)
        }

      return property.address.match(this.searchAddress) &&
        searchTypeMatch &&
        property.bedrooms.match(this.searchBedrooms) &&
        property.county.match(this.searchCounty)
      });
    }
  }

我没有在Vue应用程序中使用路由，但要使以下内容起作用，您必须确保
this.$route.query.search
（以及其他路由属性）是一个

让我知道这是否适合你

重新编辑：

您好，请将computed属性更改为以下内容

computed: {
    filteredProperties: function () {
        let self = this
        let routeConstraints = ['search', 'type', 'bedrooms', 'county'].filter(function (val) {
            return self.$route.query[val] !== undefined
        })
        if (routeConstraints.length === 0) {
            return self.properties
        } else {
            return routeConstraints.reduce(function (acc, val) {
                return acc.filter(function (property) {
                    //basically I am checking if there is some value in the query parameter that matches properties.
                    if (self.$route.query[val] !== undefined) {
                        //check if the route parameter is an array (object)
                        if (typeof this.searchType === "object") {
                            self.$route.query[val] = [self.$route.query[val]]
                        }
                    }
                    return self.$route.query[val].some(function (item) {
                        //changed the matching condition to indexOf
                        return property[val].match(item).length > 0
                    })
                })
            }, self.properties)
        }
    }
}

基本上

我正在尝试检查从您的复选框选择中设置了哪些路由值
使用它来过滤属性数组
如果未设置任何属性，则返回所有属性
希望这能奏效
 为了序列化/反序列化数组，必须对查询参数使用JSON

data () {
    return {
      searchAddress: this.$route.query.search ? JSON.parse(this.$route.query.search) : [],
      searchType: this.$route.query.type ? JSON.parse(this.$route.query.type) : [],
      searchBedrooms: this.$route.query.bedrooms ? JSON.parse(this.$route.query.bedrooms) : [],
      searchCounty: this.$route.query.county ? JSON.parse(this.$route.query.county) : []
    }
}
computed: {
    filteredProperties: function()
    {
      return this.properties.filter((property) => 
      {
        return (this.searchAddress.length ? this.searchAddress.some((address) =>
        {
          return property.address.match(address);
        }) : true) && (this.searchType.length ? this.searchType.some((type) =>
        {
          return property.type.match(type);
        }) : true) && (this.searchBedrooms.length ? this.searchBedrooms.some((bedrooms) =>
        {
          return property.bedrooms.match(bedrooms);
        }) : true) && (this.searchCounty.length ? this.searchCounty.some((county) =>
        {
          return property.county.match(county);
        }) : true)
      });
    }
  }

然后发送如下查询参数

this.$router.push("/search?search=" + JSON.stringify(searchArray) 
  + "&type=" + JSON.stringify(typeArray)
  + "&bedrooms=" + JSON.stringify(bedroomsArray)
  + "&county=" + JSON.stringify(countyArray)
);

大家好，我只是好奇为什么要使用
match（…）
来查看给定的地址是否包含在数据集中？另外，在您将其更改为复选框之后，您可以保证在查询参数中获得一个数组。如果是的话，那么使用Array.prototype的
.some（…）
修改将非常精简。那么，我可以将
.match（）
更改为
.some（）
吗？还有什么其他选择呢？我认为这行不通，我会试试
.some（）
这个使用
.some（…）
。我可以问一下为什么不起作用吗？如果我将
property.type.match（this.searchType）
更改为
property.type.some（this.searchType）
，它就不起作用了。我也试过使用你的代码，但也不起作用：/hi，谢谢你的检查。请打印
数组好吗。isArray（this.searchType）
并检查该值是否为
true
以及该.searchType的
类型。谢谢。好的，更新一下。。。我现在已经让它工作了，它返回true并进行了一些修补，但是，如果数组中只有一个项（例如：一个属性类型）并且没有倍数，那么它会给我一个错误：
\u this.searchType.some不是函数
，但可以处理多个？我刚刚尝试过这个，我得到：
在尝试搜索时，JSON中位置0处出现了意外的标记
，可能JSON.stringify（）没有生成JSON.parse（）的参数-您必须先序列化数组，然后才能反序列化它们。
this.$router.push（“/search？search=“+JSON.stringify（searchArray）+”type=“+JSON.stringify（typeArray）+“&beddrooms=“+JSON.stringify（beddroomsarray）+”&county=“+JSON.stringify（countyArray））；
这听起来很酷，但它是一个通用的
元素，带有一个按钮，指向
/properties
，这是我的页面，而不是
/search
。此外，看起来我必须将该代码绑定到一个单击事件中？如果他们只需按enter键怎么办？我使用的是get请求。它是否是
/search
or
/properties
是不相关的。您应该绑定到表单本身的
submit
事件（它将捕获输入）-然后准备正确的URL，将
表单.操作设置为此URL，然后
返回true