问题描述
限时送ChatGPT账号..重现步骤:
如果它的多选必填规则不起作用,如果它不是一个倍数就可以了.
预期行为
规则也适用于多选
实际行为
规则在多重选择时不起作用
复制代码:
<v-app id="inspire"><v-选择:items="角色"标签=管理员级别*"类=mt-3"@focus=重置"项目文本=名称"项目值=名称"v-model=角色"必需的:rules="rules.select";></v-select><v-选择:items=子公司"标签=子公司*"类=mt-3"@focus=重置"项目文本=名称"项目值=名称"v-model=子公司"多必需的:rules="rules.select";:menu-props="{bottom: true, offsetY: true }";></v-select></v-app><脚本>新的 Vue({el: '#app',数据: {角色:[{名称:'管理员',ID:1},{名称:'超级管理员',id:2}],子公司: [{名称:ASdsad",ID:1},{名称:dsd",id:2},{名称:34",ID:3},{名称:ASvxcdsad",ID:4}],规则:{选择:[v =>!! v ||'项目是必需的']}},方法: {重启() {this.$refs.form.resetValidation();},}})
解决方案 您应该添加另一个名为 select2
的规则,用于验证所选项目的长度:
规则:{选择:[(v) =>!! v ||项目是必需的"],选择2:[(v) =>v.length>0 ||选择 2 中的项目是必需的"],}
然后将其绑定到第二个选择,如下所示:
现场演示
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
这篇关于Vuetify 多个 v-select 所需规则不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
更多推荐
[db:关键词]
发布评论