여러 v-선택 필수 규칙의 Vuetify가 작동하지 않음

여러 v-선택 필수 규칙의 Vuetify가 작동하지 않음

재생성 단계:

다중 선택 필수 규칙이 아닌 경우 다중 선택 규칙이 작동하지 않는 경우 정상임.

예상 동작

다중 선택에도 적용되는 규칙

실제 동작

다중 선택일 경우 규칙이 작동하지 않음

재생성 코드 :

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

라이브 데모

참조URL: https://stackoverflow.com/questions/64116145/vuetify-multiple-v-select-required-rules-dont-work