Vue-multiselect
Example fiddle for issue reproduction usage
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
v-model="value"
:options="options"
:multiple="true"
>
</multiselect>
<pre class="language-json">
<code>{{ value }}</code>
{{selectedNames}}
</pre>
</div>
CSS
* {
font-family: 'Lato', 'Avenir', sans-serif;
}
Babel + JSX
new Vue({
components: {
Multiselect: window.VueMultiselect.default
},
data: {
selectedNames: ['Vue.js'],
options: [
{ name: 'Vue.js', language: 'JavaScript' },
{ name: 'Rails', language: 'Ruby' },
{ name: 'Sinatra', language: 'Ruby' },
{ name: 'Laravel', language: 'PHP' }
]
},
computed: {
value: {
get () {
return this.options.filter(
option => this.selectedNames.includes(option.name)
)
},
set (newSelectedOptions) {
this.selectedNames = newSelectedOptions.map(option => option.name)
}
}
}
}).$mount('#app')