Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Vuetify multiple v-select required rules don't work

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>
like image 587
simpledev Avatar asked Dec 30 '22 20:12

simpledev


1 Answers

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

like image 71
Boussadjra Brahim Avatar answered Jan 02 '23 10:01

Boussadjra Brahim