<div class="col-lg-4 col-md-4 col-sm-12">
<label>Indicators (<span class="options">{{indicators}}</span>)</label>
<select class="select" multiple data-live-search="true" data-none-selected-text="Select">
<option v-for="in option" :max="3">{{indicator}}</option>
</select>
<label v-if="error" style="color: red;">you can select only 6 options</label>
</div>
I have a select option dropdown which consist 50 options but I need to limit the option selection to 5 options only
You can make method and on @change event of select slice only needed items:
new Vue({
el: "#demo",
data() {
return {
indicators: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16],
selected: [],
error: false,
nrOfOptions: 5
}
},
methods: {
selNr() {
this.error = false
if(this.selected.length > this.nrOfOptions) {
this.error = true
this.selected = this.selected.slice(0, this.nrOfOptions)
}
}
}
})<span class="options">{{indicators}}</span><script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div id="demo">
<div class="col-lg-4 col-md-4 col-sm-12">
<label>Indicators ()</label>
<select class="select" multiple data-live-search="true" data-none-selected-text="Select"
v-model="selected"
@change="selNr"
>
<option v-for="indicator in indicators" :max="3">{{ indicator }}</option>
</select>
<label v-if="error" style="color: red;">you can select only {{ nrOfOptions }} options</label>
{{ selected }}
</div>
</div>