Search Box and Checkbox filter with 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 on

Answer 1

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.

Answer 2

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