vue-select "required" attribute not working as expected

Question

I am using Vue-select and want to make the drop-down mandatory, but looks like it is not working.

Tried the required, rules but had no luck.

<v-select label="name"
  :close-on-select="true"
  v-model="CurrentAssignment"
  v-on:input="onSelection"
  :reduce="app => app.id"
  placeholder="Select"
  :options="EligibleOptions" :clearable="false"
  >
</v-select>

Appreciate any inputs.

Answer 1

I assume you are using Vue-select (by looking at the reduce prop and v-select syntax). A validation guide is already available in the documentation. You need to use the required prop in combination with the search-scoped slot.

Here is a demo in which when submit event will be triggered the selection dropdown will show an error and open automatically.

Note- I used the form's submit event to trigger the validation. You can use your submission logic.

Vue.component('v-select', VueSelect.VueSelect)

new Vue({
  el: '#app',
  data: {
    CurrentAssignment: null,
    EligibleOptions: [
      'foo',
      'bar',
      'baz'
    ]
  },
  methods: {
    checkForm() {}
  }
})

<script src="https://unpkg.com/vue@2"></script>
<script src="https://unpkg.com/vue-select@latest"></script>
<link rel="stylesheet" href="https://unpkg.com/vue-select@latest/dist/vue-select.css">
<div id="app">
  <form
    id="app"
    @submit="checkForm"
    action="https://vuejs.org/"
    method="post"
    >
    <v-select label="name"
      :close-on-select="true"
      v-model="CurrentAssignment"
      placeholder="Select"
      :options="EligibleOptions" 
      :clearable="false"
      >
      <template #search="{attributes, events}">
        <input
          class="vs__search"
          :required="!CurrentAssignment"
          v-bind="attributes"
          v-on="events"
          />
      </template>
    </v-select>
    <button type="submit">Submit</button>
  </form>
</div>

Answer 2

Instead of required use :rules prop and give it required method like this:

Template

          |-----------------|
<v-select :rules="[required]"></v-select>

Script

  methods: {
    required: (v) => !!v || "field required"
  }

Answer 3

By using this rules prop you can pass this from your data to that v-select

 rules: {
  select: [(v) =>  v.length>0 || "This field is required"],
}

and add this data to the v-select component as follow:

                               <v-select label="name"
                                          :close-on-select="true"
                                          v-model="CurrentAssignment"
                                          v-on:input="onSelection"
                                          :rules="rules.select"
                                          :reduce="app => app.id"
                                          placeholder="Select"
                                          :options="EligibleOptions" :clearable="false"
                                          >
                                </v-select>