JSFiddle - React, Tailwind, and code Playground

by Muzaffar Rasulov

HTML

<div><label class="typo__label">Simple select / dropdown</label>
      <multiselect v-model="value" :options="options" :multiple="true" :close-on-select="false" :clear-on-select="false" :hide-selected="true" :preserve-search="true" placeholder="Pick some" label="name" track-by="name">
        <template slot="tag" scope="props"><span class="custom__tag"><span>{{ props.option.language }}</span><span class="custom__remove" @click="props.remove(props.option)">❌</span></span></template>
    </multiselect>
    <pre class="language-json"><code>{{ value  }}</code></pre>
</div>

JavaScript

import Multiselect from 'vue-multiselect'

  export default {
      components: {
        Multiselect
    },
    data () {
        return {
          value: [
          { name: 'Vue.js', language: 'JavaScript' }
          ],
          options: [
          { name: 'Vue.js', language: 'JavaScript' },
          { name: 'Adonis', language: 'JavaScript' },
          { name: 'Rails', language: 'Ruby' },
          { name: 'Sinatra', language: 'Ruby' },
          { name: 'Laravel', language: 'PHP' },
          { name: 'Phoenix', language: 'Elixir' }
          ]
      }
  }
}