I want to validate a multiple select filed (v-select) with vee-validate validationProvider. For single select option it is working fine. but when i am trying for the multiple select it is not working.
How can i do this?
I have tried:
<ValidationProvider name="types" vid="types">
<b-form-group
class="row"
label-cols-sm="4"
label-for="types"
slot-scope="{ valid, errors }"
>
<template v-slot:label>
Types <span class="text-danger">*</span>
</template>
<v-select
id="hat_days"
v-model="profile.types"
:reduce="op => op.value"
multiple
:options="TypeList"
label="text"
:state="errors[0] ? false : (valid ? true : null)"
:placeholder="Select Type"
required
>
</v-select>
<div class="invalid-feedback">
{{ errors[0] }}
</div>
</b-form-group>
Also tried:
<ValidationProvider name="types" vid="types" rules='required|min:1'> // Or rules='required|min_value:1'
<b-form-group
class="row"
label-cols-sm="4"
label-for="types"
slot-scope="{ valid, errors }"
>
<template v-slot:label>
Types <span class="text-danger">*</span>
</template>
<v-select
id="hat_days"
v-model="profile.types"
:reduce="op => op.value"
multiple
:options="TypeList"
label="text"
:state="errors[0] ? false : (valid ? true : null)"
:placeholder="Select Type"
required
>
</v-select>
<div class="invalid-feedback">
{{ errors[0] }}
</div>
</b-form-group>