javascript - 使用 Vue 的搜索框和复选框过滤器
问题描述
我正在尝试使用 Vue 构建过滤器系统。
更新
过滤器工作,但计算的所有函数都是单独的函数。那么我怎样才能使它们成为一个功能并使用它。
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 中使用它。
<div v-for="estate in oneFunction" class="card-body">
解决方案
首先将您的过滤器搜索结果设置为变量,然后您可以按or(||)
表达式检查过滤器!
我
this
通过设置该变量修改了内部箭头函数,并在最后一行返回result
为默认值
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;
}
}
推荐阅读
- flutter - 需要在 Flutter App 中检查输入的值是否为数量
- mysql - 实体框架mysql连接字符串错误?
- ansible - Ansible - 循环对象列表内的嵌套数组?
- python - syft 安装失败
- android - Jetpack Compose 在打开时将 ModalDrawer 上的状态栏颜色设置为透明
- r - 具有已知起点和终点的最陡下降路径
- typescript - 在 typescript 中创建一个 Atom 包
- python - 递归函数迭代次数超出预期
- reactjs - useState 是否应该依赖 React 中的初始 useState?
- javascript - localStorage 在使用 Promise 设置时获取旧值