Veevalidate - Buefy - How can i use the error outside of ValidationProvider?

Question

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 !

Answer 1

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>