0

我最近在为物业网站构建搜索组件方面获得了一些帮助。这个想法是我有一个/properties带有属性列表的页面和一个通用搜索组件，该组件在每个页面上都有一个指向的操作/properties和一个GET方法。

一个示例搜索可能是：

/properties/?search=Green%20Park&type=Apartment&type=Bungalow&bedrooms=1&county=Blaenau%20Gwent

或者...

/properties/?search=&type=Apartment&bedrooms=1&county=

我有一些代码旨在将过滤后的属性显示为计算属性。但是，声明中似乎有问题，else并且没有返回任何内容。这是我的代码：

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.
                    return self.$route.query[val].some(function (item) {
                        //changed the matching condition to indexOf
                        return property[val].match(item).length > 0
                    })
                })
            }, self.properties)
        }
    }
}

我收到以下错误：

self.$route.query[val].some is not a function

但它只会在尝试使用搜索时出错（参见上面的示例），如果我不使用搜索并直接进入属性页面，它就可以正常工作：/properties.

类型：可以是单一类型，也可以是多个类型。

谁能帮助我并解释为什么它给我这个错误以及如何解决它？谢谢！

4

2 回答 2

0

在您给出的示例中，您没有将元素数组传递给查询。当每个查询参数只有一个值时，它会作为字符串返回。当它有多个值时，例如test=1&test=2，它将返回一个字符串数组。

我认为您真正想做的是测试是否有任何查询参数匹配为键。一种方法是：

return Object.keys(self.$route.query).some(function (item) {
   return property[val].match(item).length > 0
 })
于 2018-09-28T05:19:52.550 回答
0

我认为这是错误的，因为您没有使用ES6,self在其中未识别，您可以arrow function改用， 

computed: {
 filteredProperties() {
    let routeConstraints = ['search', 'type', 'bedrooms', 'county'].filter((val) => {
        return this.$route.query[val] !== undefined
    })
    if (routeConstraints.length === 0) {
        return this.properties
    } else {
        return routeConstraints.reduce((acc, val) => {
            return acc.filter((property) => {

                return this.$route.query[val].some((item)=> {
                    //changed the matching condition to indexOf
                    return property[val].match(item).length > 0
                })
            })
        }, this.properties)
    }
}

}

于 2018-09-28T06:15:40.270 回答