本文介绍了使用Vue搜索框和复选框过滤器的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试使用Vue构建过滤系统。
I am trying to build filter system with Vue.
过滤器工作,但所有计算的函数是separeted函数。那么我如何在一个功能中使用它并使用它。
Filters working, but all the functions computed are separeted functions. So How can I make those in one function and use it.
export default {
data() {
return {
estates: [],
search: '',
regions:['関西','関東','京橋'],
checkedRegions:[]
}
},
created(){
axios.get('/ajax').then((response) => {
this.estates = response.data;
});
},
computed: {
one: 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
和 filteredRooms
制作一个函数。例如,如何使用&&
返回这些功能?并在此div中使用它。
filteredestate
filteredRegions
and filteredRooms
make one function. for example how to return those function with &&
? And use it in this div.
<div v-for="estate in oneFunction" class="card-body">
推荐答案
首先将过滤搜索结果设置为变量,然后你可以通过或(||)
表达式检查过滤器!
Set your filter search result first as variable and you can check filter by or(||)
expression !
one: function() {
var that = this;
var result = this.estates.filter((estate) =>
estate.building_name == that.search;
);
if(this.checkedRegions.length || this.checkedRooms.length) {
return result.filter(estate => that.checkedRegions.includes(estate.region) || that.checkedRooms.includes(estate.rooms))
}
// when region and room length is 0
return result;
}
}
这篇关于使用Vue搜索框和复选框过滤器的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!