<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>Tengo un menú desplegable de opciones de selección que consta de 50 opciones, pero necesito limitar la selección de opciones a solo 5 opciones
Puede hacer que el método y el evento @change de la slice seleccionada solo sean elementos necesarios:
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>