JSFiddle - React, Tailwind, and code Playground

by asemahle

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.js"></script>
<div id="app">
  <input v-model="filter">
  <select v-model="selected" multiple>
    <optgroup :label="group.label" v-for="group in optgroups">
      <option :value="option.value" v-for="option in group.options | filterBy filter in 'text'">{{ option.text }}</option>
    </optgroup>
  </select>
</div>

JavaScript

var app = new Vue({
  el: '#app',

  data: {
    filter: '',
    selected: '',
    optgroups: [{
      label: 'A',
      options: [{
        text: 'text1',
        value: 'value1'
      }, {
        text: 'text2',
        value: 'value2'
      }, {
        text: 'text3',
        value: 'value3'
      }],
    }, {
      label: 'B',
      options: [{
        text: 'text4',
        value: 'value4'
      }, {
        text: 'text5',
        value: 'value5'
      }]
    }]
  }
})