如何使用Vuejs从多个选择选项（下拉列表）中筛选列表

Question

我需要弄清楚过滤器功能，它将根据多个下拉列表中的选择来完成对象列表的过滤。如果在下拉列表中未选择任何内容，则不应过滤任何这些值。

我已经设置了一个小提琴，其中列出了一个模拟结构，但需要帮助编写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'
    }
    ]
  }
})

Answer 1

您遇到的一些问题：

1. v-model="type"/"size"错误，它应该与selectedType / Size绑定。 v-model <select>表示此Dom的当前数据，而不是其子项的数据。

2. 创建一个计算的，返回过滤的结果，而不是v-for="item in items"

修好后，代码如下：

＆＃13;
＆＃13;
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
      })
    }
  }
})
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;