CODEWITHSUNDEEP
javascriptvue.jsmulti-select
user101289
user101289

Reputation: 10422

using `filterBy` with dynamic select list

I'm building a form with a long list of select items using vue.js. I'm using the dynamic select list documented here: http://012.vuejs.org/guide/forms.html#Dynamic_Select_Options

However, I want to allow users to quickly filter this list using the filterBy directive. I don't see how you can combine these two-- is it possible to filter a dynamic list? Or can filterBy only be used against a v-for?

Upvotes: 0

Views: 1418

Answers (2)

asemahle
asemahle

Reputation: 20795

In 0.12 you can use filters with the options param. The docs show a syntax that looks identical to filtering v-for.

Here is an example showing filterBy (uses version 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.

Upvotes: 1

Tronsfey Chung
Tronsfey Chung

Reputation: 1

Check this 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 : '';
          }

        }
    })

You can use v-for to create optgroups and then use filterBy or a custom filter instead(as in the fiddle) to filter your options data.

Hope it would help.

Upvotes: 0

Related Questions