[Vuejs]-Vee-validate + vuetify text input field → how to migrate to new versions?

by

1👍

✅

The Field component expects a name attribute, the error is thrown when it tries to call split() on the value. Just set a name and the error is gone:

<Field as="v-text-field" 
  name="username"
  ...
></Field>

However, label is a prop of the Field component, but it only passes attrs (i.e. non-props) to the custom input component (see code), so you cannot pass a label to the v-text-field. Also, you would have to get the error messages through the form.

Looks like using :as is more trouble than solution at the moment. Probably better to stick with the slot:

<vee-validation-field
  v-slot="{ field, errors }"
  name="username"
  rules="required|needsL"
  v-model="username"
>
  <v-text-field
    v-model="field.value"
    v-bind="field"
    label="username"
    prepend-icon="mdi-account-circle"
    :error-messages="errors"
  />
</vee-validation-field>

(the somewhat duplicated v-bind and v-model on the VTextField is necessary for them moment due to an issue in vee-validate)

const { createApp, ref } = Vue;
const { createVuetify } = Vuetify
const vuetify = createVuetify()

VeeValidate.defineRule('required', VeeValidateRules.required)
VeeValidate.defineRule('needsL', v => v.toLowerCase().includes('L') || 'Input something with an `l`')

const app = {
  components: {
    'vee-validation-form': VeeValidate.Form,
    'vee-validation-field': VeeValidate.Field,
  },
  setup(){
    return {
      username1: ref('user 1'),
      username2: ref('user 2'),
    }
  }

}
createApp(app).use(vuetify).mount('#app')
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/vuetify@3/dist/vuetify.min.css" />
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css" rel="stylesheet">
<div id="app">
  <v-app>
    <v-main>
      <vee-validation-form as="v-form" v-slot="{errors}">
        <v-card-text>
        Field from :as
          <vee-validation-field as="v-text-field" 
            name="username1"
            v-model="username1"
            prepend-icon="mdi-account-circle"
            :error-messages="errors.username1"
            rules="required|needsL"
          ></vee-validation-field>
          
          Field in slot
          <vee-validation-field
            v-slot="{ field, errors }"
            v-model="username2"
            name="username2"
            rules="required|needsL"
          >
            <v-text-field
              v-model="field.value"
              v-bind="field"
              label="username"
              prepend-icon="mdi-account-circle"
              :error-messages="errors"
            />
          </vee-validation-field>
          
        </v-card-text>
      </vee-validation-form>

    </v-main>
  </v-app>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@3/dist/vuetify.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vee-validate/4.10.8/vee-validate.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@vee-validate/rules@4.11.0/dist/vee-validate-rules.min.js"></script>
👤Moritz Ringler

Leave a comment