2

I tried to use the ValidationProvider errors outside of the tag but it didn't work. Here is my code :

<ValidationObserver
  ref="obs"
  v-slot="{ errors }"
>
  <b-field
    :type="{ 'is-danger': errors.phone[0] }"
    class="has-margin-bottom-0"
  >
    <div class="control">
      <b-select
        v-model="localPrefix"
        class="no-danger phone-prefix"
      >
        <option
          v-for="phonePrefix in phonePrefixTypes"
          :key="phonePrefix.id"
          :value="phonePrefix.id"
        >
          {{ phonePrefix.prefix }}
        </option>
      </b-select>
    </div>
    <ValidationProvider
      v-slot="{ errors }"
      :vid="name"
      :name="label"
      mode="lazy"
      slim
      :rules="maxLength.validation"
    >
      <b-input
        v-model="localPhone"
        :maxlength="maxLength.length"
        :class="{ 'is-danger': errors.phone[0] }"
        :has-counter="false"
        type="tel"
        expanded
      ></b-input>
    </ValidationProvider>
  </b-field>
  <b-field
    :type="{ 'is-danger': errors.phone[0] }"
    :message="errors.phone"
    class="is-margin-top-0em"
  ></b-field>
</ValidationObserver>

The problem is, with this code, errors.phone didn't existe at this time. I supposed that i tried to used it before any validation of the provider, because if i use errors and not errors.phone, it's work but it return the object phone and not the error of the validation.

I think i need to initialize errors.phone but i don't know how to use the v-slot variable outside of the provider.

I hope you understand my problem, and thank you all for helping me !

Valentin Genevois
  • 41
  • 4

1 Answers1

0

You're close to having this right I think. Inside the ValidationProvider, you use errors directly. Inside the ValidationObserver (but outside the VP) you use errors[<vid>]. In your example it isn't clear that the vid of your VP is in fact "phone", but assuming it is, all you should need to do is change your VP code to look like this:

<ValidationProvider
  v-slot="{ errors }"
  :vid="name"
  :name="label"
  mode="lazy"
  slim
  :rules="maxLength.validation"
>
  <b-input
    v-model="localPhone"
    :maxlength="maxLength.length"
    :class="{ 'is-danger': errors }"
    :has-counter="false"
    type="tel"
    expanded
  ></b-input>
</ValidationProvider>
Ryley
  • 21,046
  • 2
  • 67
  • 81
  • Well, yes the `vid` of my VP is "phone". I declare the variable in my props and is by default "phone". I tried to only use `errors` and not `errors.phone` in my VP, and continue to use `errors.phone` outside. But i'm sad to tell you this didn't work... I have the same error : `TypeError: "errors.phone is undefined"` – Valentin Genevois Dec 14 '19 at 17:32
  • OK, I see what you're saying now. What if you use something like `errors.phone?errors.phone[0]:''` when you're outside of a ValidationProvider? – Ryley Dec 14 '19 at 18:00
  • Either way, I think it's probably a bug, so I filed one with the library for you: https://github.com/logaretm/vee-validate/issues/2546 – Ryley Dec 14 '19 at 18:06
  • Thank's guy for helping me. For the moment, `errors.phone?errors.phone[0]:''` look's like to remove the error's console. But i hope the github request will give us a better option. I don't close this question, waiting github. – Valentin Genevois Dec 16 '19 at 08:08