I am currently working on developing a filter system using Vue.
Update
The filters are functioning properly, but all the computed functions are separate. Is there a way to combine them into one function for better efficiency?
export default {
data() {
return {
estates: [],
search: '',
regions:['関西','関東','京橋'],
checkedRegions:[]
}
},
created(){
axios.get('/ajax').then((response) => {
this.estates = response.data;
});
},
computed: {
oneFunction: function() {
var result = this.estates.filter((estate) =>
estate.building_name.match(this.search)
);
if(this.checkedRegions.length && this.checkedRooms.length) {
return result.filter(estate => this.checkedRegions.includes(estate.region) && this.checkedRooms.includes(estate.rooms))
}
return result;
}
}
}<div class="container-fluid">
<div class="row">
<div class="col-md-9">
<input type="text" v-model="search" name="" placeholder="search estate" value="">
<div v-for="estate in filteredestate" class="card-body">
<h2>{{estate.building_name}}</h2>
<p>{{estate.address}}</p>
</div>
</div>
</div>
</div>filteredestate, filteredRegions, and filteredRooms can be combined into one function. For example, how can this combined function use logical AND operations? And how can we implement it in this div?
<div v-for="estate in oneFunction" class="card-body">