[英]Vuetify multiple v-select required rules don't work
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 :您应该添加另一个名为select2
规则,用于验证所选项目的长度:
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.