Vuejs를 사용하여 여러 선택 옵션(드롭다운)에서 목록을 필터링하는 방법

Vuejs를 사용하여 여러 선택 옵션(드롭다운)에서 목록을 필터링하는 방법

여러 드롭다운에서 선택한 항목에 따라 개체 목록을 필터링하는 필터 함수를 찾아야 합니다.드롭다운에서 아무것도 선택되지 않은 경우 이러한 값 중 하나에 따라 필터링되지 않습니다.

나는 mock structure를 배치하는 fielen을 설정했지만, 드롭다운에서 옵션을 선택했을 때 실시간으로 목록을 필터링하기 위해 javascript 함수를 쓰는 데 도움이 필요하다.

다음은 구조 예를 제시하겠습니다.https://jsfiddle.net/5k4ptmqg/751/

<div id="app">
  <select v-model="type">
    <option value="type1">Type 1</option>
    <option value="type2">Type 2</option>
  </select>

  <select v-model="size">
    <option value="size1">Size 1</option>
    <option value="size2">Size 2</option>
  </select>

  <ul>
    <li v-for="item in items">
      <span>{{ item.name }}</span>
      <span>{{ item.type }}</span>
      <span>{{ item.size }}</span>
    </li>
  </ul>
</div>

new Vue({
  el: '#app',
  data: {
    items: [
    {
      name: 'name1',
      type: 'type1',
      size: 'size1'
    },
    {
      name: 'name2',
      type: 'type2',
      size: 'size2'
    },
    {
      name: 'name3',
      type: 'type1',
      size: 'size1'
    },
    {
      name: 'name4',
      type: 'type2',
      size: 'size2'
    }
    ]
  }
})

몇 가지 문제가 있었습니다.

1. v-model="type"/"size"잘못되어 있습니다.선택한 타입/사이즈로 바인드 됩니다. v-model위해서<select>이 돔의 현재 데이터를 의미하며, 자녀의 데이터가 아닙니다.

2. 계산 결과를 1개 생성하여 다음 대신 필터링된 결과를 반환합니다.v-for="item in items"

수정 후 코드는 다음과 같습니다.

new Vue({
  el: '#app',
  data: {
    selectedType: '',
    selectedSize: '',
    items: [
      {
        name: 'name1',
        type: 'type1',
        size: 'size1'
      },
      {
        name: 'name2',
        type: 'type2',
        size: 'size2'
      },
      {
        name: 'name3',
        type: 'type1',
        size: 'size1'
      },
      {
        name: 'name4',
        type: 'type2',
        size: 'size2'
      }
    ]
  },
  computed: {
    computed_items: function () {
      let filterType= this.selectedType,
          filterSize = this.selectedSize
      return this.items.filter(function(item){
        let filtered = true
        if(filterType && filterType.length > 0){
          filtered = item.type == filterType
        }
        if(filtered){
          if(filterSize && filterSize.length > 0){
            filtered = item.size == filterSize
          }
        }
        return filtered
      })
    }
  }
})

<script src="https://unpkg.com/vue@2.0.1/dist/vue.js"></script>

<div id="app">
  <select v-model="selectedType">
    <option value="type1">Type 1</option>
    <option value="type2">Type 2</option>
  </select>
  
  <select v-model="selectedSize">
    <option value="size1">Size 1</option>
    <option value="size2">Size 2</option>
  </select>
  
  <ul>
    <li v-for="item in computed_items">
      <span>{{ item.name }}</span>
      <span>{{ item.type }}</span>
      <span>{{ item.size }}</span>
    </li>
  </ul>
</div>

언급URL : https://stackoverflow.com/questions/49521851/how-to-filter-list-from-multiple-select-options-dropdowns-using-vuejs