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

Question

I am trying to build filter system with Vue.

Updated

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 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">

Answer 1

Set your filter search result first as variable and you can check filter by or(||) expression !

I modified this inside arrow function by setting to that variable and on the last line return result as default

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;
  }
}

Answer 2

rooms and regions are arrays. So you need to iterate through these arrays in order to render the checkboxes.

instead of this:

<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/>

should be like this:

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

similar should be done with rooms .

Also, in js part, you have checkedRegions while in template you have checkedLocations . I guess this should be too checkedRegions .