Vue-multiselect

Example fiddle for issue reproduction usage

by WILLIAM CORREA

HTML

<script src="https://unpkg.com/[email protected]/dist/vue-multiselect.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/vue-multiselect.min.css">
<div id="app">
  <multiselect 
    v-model="value" 
    :options="options" 
    :close-on-select="false" 
    :clear-on-select="false" 
    :hide-selected="true"
    :force-open.sync="forceOpen"
    :preserve-search="true" 
    placeholder="Pick some" 
    label="name" 
    track-by="name" 
    :preselect-first="true"
    id="example"
    @select="onSelect"
  >
  </multiselect>
  <input type="checkbox" v-model="forceOpen">
  <pre class="language-json"><code>{{ value  }}</code></pre>
</div>

CSS

* {
  font-family: 'Lato', 'Avenir', sans-serif;
}

Babel + JSX

const MyMultiSelect = {
	extends: window.VueMultiselect.default,
  props: {
  	forceOpen: {
    	type: Boolean,
      default: false
    }
  },
  watch: {
  	forceOpen: {
    	immediate: true,
      handler (value) {
      	this.isOpen = value
      }
    },
    isOpen (value) {
      // imported from comp
      this.pointerDirty = false
      if (value === false) {
      	this.$emit('update:force-open', false)
      }
    }
  }
}

new Vue({
	components: {
  	Multiselect: MyMultiSelect
	},
	data: {
    forceOpen: false,
  	value: '',
  	options: [
        { name: 'Vue.js', language: 'JavaScript' },
        { name: 'Rails', language: 'Ruby' },
        { name: 'Sinatra', language: 'Ruby' },
        { name: 'Laravel', language: 'PHP', $isDisabled: true }
      ]
	},
  methods: {
  	customLabel (option) {
      return `${option.library} - ${option.language}`
    },
    onSelect (option, id) {
    	console.log(option, id)
    }
  }
}).$mount('#app')