Vue-multiselect
Example fiddle for issue reproduction usage
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="true"
:clear-on-select="true"
:preserve-search="true"
placeholder="Pick some"
label="name"
track-by="name"
id="example"
@search-change="asyncFind"
>
</multiselect>
<pre class="language-json"><code>{{ value }}</code></pre>
</div>
CSS
* {
font-family: 'Lato', 'Avenir', sans-serif;
}
Babel + JSX
new Vue({
components: {
Multiselect: window.VueMultiselect.default
},
data: {
value: '',
options: [
{ name: 'Vue.js', language: 'JavaScript' },
{ name: 'Rails', language: 'Ruby' },
{ name: 'Sinatra', language: 'Ruby' },
{ name: 'Laravel', language: 'PHP'}
]
},
methods: {
customLabel (option) {
return `${option.library} - ${option.language}`
},
asyncFind (query) {
this.isLoading = true
this.$http.get('http://0.0.0.0:8000/get_advertisers').then(response => {
this.advs = response.data
this.isLoading = false
})
},
}
}).$mount('#app')