[Vue.js] 다중 셀렉트박스(select)를 이용한 조회 기능 코드

[그림 1] 다중 셀렉트박스를 이용한 조회 결과

 

[그림 1]과 같이 3개의 셀렉트박스(select)를 이용한 조회 로직을 구현하고자 하였다. 구현한 코드는 아래와 같다.

data() {
    return {
      searchKeywords: ['total', 'total', 'total'],
      searchStaticKeys: ['facility.name', 'manhole.name', 'sensor.name']
    }
  },

doSearch() {
  this.alarms = []
  let tempArr = [...this.alarmsTotal] // 조회 대상이 되는 전체 데이터를 tempArr 배열에 할당
  for (let i = 0; i < this.searchKeywords.length; i++) {
    if (this.searchKeywords[i] === 'total') {
      continue
    }
    tempArr = tempArr.filter(
      (el) => el[this.searchStaticKeys[i]] === this.searchKeywords[i]
    )
  }
  this.alarms = tempArr
}