Vue-multiselect

Example fiddle for issue reproduction usage

by Damian Dulisz

HTML

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/vue-multiselect.min.css">
<script src="https://unpkg.com/[email protected]/dist/vue-multiselect.min.js"></script>
<div id="app">
  <multiselect 
    :value="value"
    :options="options"
    @input="setValue($event)"
    @search-change="search"
    >
    <span
      slot="noResult"
      @click="setNewValue">
      No elements found. Click to adding 
    </span>
  </multiselect>
  <multiselect 
    :value="value"
    :options="options"
    @input="setValue($event)"
    @search-change="search"
    >
    <template v-slot:noResult>
      <span @click="setNewValue">
        No elements found. Click to adding 
      </span>
    </template>
  </multiselect>
  <pre>{{ value }}</pre>
</div>

CSS

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

Babel + JSX

new Vue({
	components: {
  	Multiselect: window.VueMultiselect.default
	},
	data: {
  	value: null,
  	options: ['1234'],
    inputedValue: null
	},
  methods: {    
    setValue (value) {
      this.value = value
    },
    search (value) {
    	this.inputedValue = value
    },
    setNewValue () {
      this.value =  this.inputedValue
      this.options = [ ...this.options, this.value ]
    }
  }
}).$mount('#app')