Recently, I created a custom Vue JS search feature for filtering properties on a real estate website. This search component is displayed on every page, so I decided to utilize a URL search query approach. By extracting the search parameters using this.$route.query.search, I was able to retrieve and store the values in variables.
The property data is sourced from a JSON file structured as shown below:
{
"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"
}
}
An example of my search query is as follows:
/properties/?search=Address%20Here&type=Apartment&bedrooms=2&county=Maesteg
This query allows for precise filtering.
To filter the properties effectively, I initialized variables within my data object to store each query parameter like this:
data () {
return {
searchAddress: this.$route.query.search,
searchType: this.$route.query.type,
searchBedrooms: this.$route.query.bedrooms,
searchCounty: this.$route.query.county
}
}
Moreover, I implemented a filter in the computed properties section named filteredProperties to refine the properties displayed in the 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.searchBedroom
s) && property.county.match(this.searchCounty)
});
}
}
Moving forward, I now aim to replace the current <select> dropdown menu used for selecting property types with checkboxes, allowing users to choose multiple types concurrently. However, I am uncertain about modifying this particular aspect of my filtering mechanism which currently compares against a single property type:
property.type.match(this.searchType)
I appreciate any assistance or insights provided. Thank you.
Update:
In recent attempts to enhance my filter functionality, I made the following adjustments:
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)
})
});
}
}
I need the search functionality to work seamlessly whether a URL query is present or not.
Furthermore, I experimented with an if/else statement:
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:
After making adjustments, the filter function now operates as intended:
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)
});
}
}