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="yearsWithSpecialOption"
:multiple="false"
track-by="library"
placeholder="Select year"
>
<!--Here I want to add predefined option "All Years" -->
<!--something like this: -->
<template slot="predefinedOption" :value="'0'">All years</template>
<!--but this doesn't work))) -->
<!--is there any way to get it without changing the years array?-->
</multiselect>
<pre>{{ value }}</pre>
</div>
CSS
* {
font-family: 'Lato', 'Avenir', sans-serif;
}
Babel + JSX
new Vue({
components: {
Multiselect: window.VueMultiselect.default
},
data: {
value: '2019',
years: [2017, 2018, 2019]
},
computed: {
yearsWithSpecialOption() {
return this.years.concat(['All years'])
}
}
}).$mount('#app')