Question

我最近在为房地产网站建立搜索组件方面获得了一些帮助。我的想法是，我有一个/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则可以正常工作。

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

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

Answer 1

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

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

return Object.keys(self.$route.query).some(function (item) {
   return property[val].match(item).length > 0
 })

Answer 2

我认为此错误是由于您未使用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)
    }
}

}

Nuxt JS / Vue JS搜索过滤器不起作用

2 个答案: