Javascript 使用Vue搜索框和复选框过滤器

我正在尝试用Vue构建过滤系统

更新 过滤器工作，但所有计算的函数都是分离函数。那么我如何在一个函数中创建这些函数并使用它呢

导出默认值{
数据（）{
返回{
房地产：[]，
搜索：“”，
区域：['関西','関東','京橋'],
检查区域：[]
}
},
创建（）{
get（'/ajax'）。然后（（响应）=>{
this.estates=response.data；
});
},
计算：{
一:函数(){
var结果=this.estate.filter（（estate）=>
estate.building_name.match（this.search）
);
if（this.checkedregons.length&&this.checkedRooms.length）{
返回result.filter（estate=>this.checkedRegions.includes（estate.region）&&this.checkedRooms.includes（estate.rooms））
}
返回结果；
}
}
}

{{estate.building_name}
{{estate.address}

房间

和

区域

都是数组。因此需要迭代这些数组才能呈现复选框

与此相反：

<input type="checkbox" v-model="checkedLocations"  v-bind:value="regions">関東 <input/>
<input type="checkbox" v-model="checkedLocations"  v-bind:value="regions">関西 <input/>
<input type="checkbox" v-model="checkedLocations"  v-bind:value="regions">北海道<input/>

関東 
関西 
北海道

应该是这样的：

<template v-for="region in regions">
  <input type="checkbox" v-model="checkedLocations"  v-bind:value="region.id">region.region<input/>
</template>        

地区

应在

房间

中执行类似操作

---

另外，在js部分中，您有

checkedRegions

，而在模板中您有

checkedLocations

。我想这应该也是

checkedRegions

首先将过滤器搜索结果设置为变量，您可以通过

或（| |）表达式来检查过滤器

我修改了
这个
内部箭头函数，将其设置为该变量，并在最后一行返回
结果
作为默认值

谢谢，但当我运行它时，其中每个函数都会出现错误；
Vue warn]：属性或方法“filteredRegion”未在实例上定义，而是在渲染期间引用。通过初始化属性，确保此属性在数据选项中或对于基于类的组件是被动的。见：https://vuejs.org/v2/guide/reactivity.html#Declaring-反应属性。
从渲染中删除
过滤器区域
！根据您的要求，我将三个函数合并为一个！因此，在渲染for loop时使用
one
错误将消失，但当我将卡体的for循环更改为“one”时，我无法看到数据。。。我想有些不对劲。。如果您需要查看它，那么您可以检查这里的图像好的，改进了您的代码并解决了问题。但多亏了你，它现在起作用了，我正在检查这个答案。还更新了问题。你可以看看我换了什么
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;
  }
}