Vue JS根据复选框数组过滤结果

Question

我已经构建了一个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 () {
    return {
      searchAddress: this.$route.query.search,
      searchType: this.$route.query.type,
      searchBedrooms: this.$route.query.bedrooms,
      searchCounty: this.$route.query.county
    }
}

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

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

现在这个工作绝对正常并且工作正常 ...但是我现在需要修改它而不是<select>下拉菜单，这是你当前选择卧室数量，或属性类型等，我现在需要更换属性类型 <select>下拉列表，带有复选框，以便用户可以选择多个属性类型，并基本上将其作为数组添加到URL中。

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

property.type.match(this.searchType)

非常感谢

UPDATE

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

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

      });
    }
  }

我需要搜索才能使用和不使用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)
      });
    }
  }

UPDATE

我通过以下方式实现了它：

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

Answer 1

您必须使用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)
);

Answer 2

我没有在Vue应用程序中使用路由，但为了以下工作，你必须确保this.$route.query.search （和其他路由属性）是（是） [] （s）。

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

如果这对您有用，请告诉我。

重新编辑 ：

嗨，请将计算属性更改为以下内容

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

基本上，

1. 我正在尝试检查您的复选框选择中设置的路由值
2. 用它来过滤属性数组。
3. 如果未设置，则返回所有属性。

希望这有效。