I have a select option dropdown and it contains 50 options, but I need to restrict the option selecting to 5 options using Vue JS

Question

<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

Answer 1

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>