Question

我使用vue.js构建包含一长串精选项目的表单。我使用此处记录的动态选择列表：http://012.vuejs.org/guide/forms.html#Dynamic_Select_Options

但是，我想允许用户使用filterBy指令快速过滤此列表。我不知道如何将这两者结合起来 - 是否可以过滤动态列表？或者filterBy只能用于v-for？

Answer 1

在0.12中，您可以使用带有选项参数的过滤器。 docs显示的语法与过滤v-for相同。

以下示例显示filterBy（使用版本0.12.16）：

var app = new Vue({
  el: '#app',
  
  data: {
    selected: '',
    options: [
      { text: '1', value: 1, show: true },
      { text: '2', value: 2, show: false },
      { text: '3', value: 3, show: true },
      { text: '4', value: 4, show: true },
      { text: '5', value: 5, show: false },
    ]
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/0.12.16/vue.js"></script>
<div id="app">
  Filter by 'show' <br>
  <select v-model="selected" options="options | filterBy true in 'show'"></select>
</div>

注意：options的{{1}}参数已为deprecated in 1.0。在1.0中，您可以直接在<select v-model>中使用v-for。可以嵌套<select>以使用optgroups。

Answer 2

检查这个小提琴https://jsfiddle.net/tronsfey/4zz6zrxv/5/。

<div id="app">
   <input type="text" v-model="keyword">
   <select name="test" id="test">
     <optgroup v-for="group in list | myfilter keyword" label="{{group.label}}">
       <option value="{{item.price}}" v-for="item in group.data">{{item.text}}</option>
     </optgroup>
   </select>
</div>




 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.js"></script>
    new Vue({
        el: '#app',
        data: function () {
            return {
                    keyword : '',
                list: [
                  {
                    label:'A',
                    data:[
                       {price: 3, text: 'aa'},
                       {price: 2, text: 'bb'}
                    ]
                  },
                    {
                    label:'B',
                    data:[
                       {price: 5, text: 'cc'},
                       {price: 6, text: 'dd'}
                    ]
                  }
                ]
            }
        },
        filters : {
            myfilter : function(value,keyword){
            return (!keyword || keyword === 'aaa') ? value : '';
          }

        }
    })

您可以使用v-for创建选项组，然后使用 filterBy 或自定义过滤器（如在小提琴中）来过滤选项数据。

希望它会有所帮助。

使用带有动态选择列表的`filterBy`

2 个答案: