Steps to reproduce:
If its multiple select required rules don't work if its not a multiple its ok.
Expected Behavior
rules to work for multiple select as well
Actual Behavior
rules don't work if its multiple select
Reproduction code :
<div id="app">
<v-app id="inspire">
<v-select
:items="role"
label="Admin level*"
class="mt-3 "
@focus="reset"
item-text="name"
item-value="name"
v-model="roleee"
required
:rules="rules.select"
></v-select>
<v-select
:items="subsidiaries"
label="Subsidiary*"
class="mt-3 "
@focus="reset"
item-text="name"
item-value="name"
v-model="subsidiariesss"
multiple
required
:rules="rules.select"
:menu-props="{ bottom: true, offsetY: true }"
></v-select>
</v-app>
</div>
<script>
new Vue({
el: '#app',
data: {
role:[
{name:'Admin', id:1},
{name: 'SuperAdmin', id:2}
],
subsidiaries: [
{name: "ASdsad", id:1},
{name: "dsd", id:2},
{name: "34", id:3},
{name: "ASvxcdsad", id:4}
],
rules: {
select: [v => !!v || 'Item is required']
}
},
methods: {
reset() {
this.$refs.form.resetValidation();
},
}
})
</script>
You should add another rule called select2
which verifies the length of selected items :
rules: {
select: [(v) => !!v || "Item is required"],
select2: [(v) => v.length>0 || "Item is required in select 2"],
}
then bind it to the second select as follows :
<v-select
:items="subsidiaries"
label="Subsidiary*"
class="mt-3 "
@focus="reset"
item-text="name"
item-value="name"
v-model="subsidiariesss"
multiple
required
:rules="rules.select2"
:menu-props="{ bottom: true, offsetY: true }"
></v-select>
LIVE DEMO
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With