Vuetify 多个 v-select 所需规则不起作用 [英] Vuetify multiple v-select required rules don't work

问题描述

重现步骤:

如果它的多选必填规则不起作用，如果它不是一个倍数就可以了.

预期行为

规则也适用于多选

实际行为

规则在多重选择时不起作用

复制代码:

 
<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屋！