重现步骤:
如果它的多个选择所需的规则不起作用,如果它不是多个也可以。
预期行为
规则也适用于多重选择
实际行为
如果是多重选择,则规则不起作用
复制代码:
<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>
您应该添加另一个名为select2
它验证所选项目的长度:
rules: {
select: [(v) => !!v || "Item is required"],
select2: [(v) => v.length>0 || "Item is required in select 2"],
}
然后将其绑定到第二个选择,如下所示:
<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>
现场演示 https://codepen.io/boussadjra/pen/dyMLxzv
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)