Vuetify 多個 v-select 所需規則不起作用

Question

重現步驟：

如果它的多選要求規則不起作用，如果它不是一個倍數就可以了。

預期行為

規則也適用於多選

實際行為

如果它的多項選擇規則不起作用

復制代碼：

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

Answer 1

您應該添加另一個名為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>

現場演示