Vue를 사용한 검색 상자 및 확인란 필터

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 v-for="estate in oneFunction" class="card-body">

필터 검색 결과를 먼저 변수로 설정하면 다음을 통해 필터를 확인할 수 있습니다.or(||)expression!

수정했습니다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;
  }
}

rooms그리고.regions어레이입니다.따라서 확인란을 렌더링하려면 이러한 어레이를 반복해야 합니다.

이 대신:

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

에 대해서도 같은 일을 해야 한다rooms.

또한 js 파트에서는,checkedRegions템플릿에 있는 동안checkedLocations이거 너무 해야 될 것 같아요.checkedRegions.

언급URL : https://stackoverflow.com/questions/54415053/search-box-and-checkbox-filter-with-vue