将 `filterBy` 与动态 select 列表一起使用

Question

我正在使用 vue.js 构建一个包含 select 项的长列表的表单。我正在使用此处记录的动态 select 列表：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>

Note: the options param for <select v-model> has been deprecated in 1.0. In 1.0, you can use v-for directly within <select>. v-for can be nested to use optgroups.

Answer 2

检查此 fiddle 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 创建 optgroup，然后使用 filterBy 或自定义过滤器（如 fiddle）来过滤您的选项数据。

希望对您有所帮助。

将 `filterBy` 与动态 select 列表一起使用

using `filterBy` with dynamic select list

javascript

multi-select

vue.js