Using VeeValidate with Vuetify v-select and v-autocomplete

Perhaps I’m missing something. But I’ve Googled a lot, and unfortunately most of the results I find are for VeeValidate 2.

I want to apply a simple “required” validation to a v-select and v-autocomplete element in a User edit form. Using the example of the v-select, the contents are filled with items that have two properties: RoleID and Role. So my code is:



The form is wrapped in a ValidationObserver. When the field is blurred, regardless of whether there is a selection or not, the error class is applied. The messages area has a single “r,” which I find is because the errors array is an array of the letters in the word “required.”

And just to be clear, this happens whether the field is selected (correctly) by its relationship to the v-model value (when editing a user) or when the selection is initially empty (a new user).

Any pointers on what I’m doing wrong will be greatly appreciated.

Sorry the original post seems to have lost the code. Let’s try that part again:

<v-select
                    id="RoleID"
                    name="RoleID"
                    v-model="user.RoleID"
                    :items="roles"
                    placeholder="Choose Role"
                    item-value="RoleID"
                    item-text="Role"
                    label="Role"
                    class="required"
                    rules="required"
                    dense
                    required
                  >
                  </v-select>