vue.jsvee-validate

how to handle duplicated v-slot names in vee-validate


Let's say that I have a code like:

<Form
  v-slot="{ errors }"
  as="v-form"
>
  <v-card-text>
    <Field
      name="username"
      v-slot="{ field, errors }"
      rules="required"
    >
      <v-text-field
        v-bind="field"
        v-model="username"
        label="user"
        :error-messages="errors"
      ></v-text-field>
    </Field>
    <Field
      name="password"
      v-slot="{ field, errors }"
      rules="required"
    >
      <!-- keyup.enter should print errors of Form's v-slot -->
      <v-text-field
        v-bind="field"
        v-model="password"
        label="password"
        :error-messages="errors"
        v-on:keyup.enter="() => {console.log(errors)}"
      ></v-text-field>
    </Field>
  </v-card-text>
</Form>

Field and Form are vee-validate components.

In this code I want to console.log errors of Form's v-slot. But password Field's errors is printed out. How to separate errors of Form and errors of Field slots?


Solution

  • destructed slot properties may be renamed (errorsformErrors):

    <Form
      v-slot="{ errors: formErrors }"
      as="v-form"
    >
      <v-card-text>
        ...
        <Field
          v-slot="{ field, errors }"
          ...
        >
          <v-text-field
            ...
            :error-messages="errors"
            v-on:keyup.enter="() => {console.log(formErrors)}"
          ></v-text-field>
        </Field>
      </v-card-text>
    </Form>