Veevalidate - Buefy - Как я могу использовать ошибку вне ValidationProvider?

Question

Я попытался использовать ошибки ValidationProvider вне тега, но это не сработало. Вот мой код:

<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>

Проблема в том, что с этим кодом errors.phoneв то время не существовало. Я предполагал, что пытался использовать его перед проверкой поставщика, потому что если я используюerrors и нет errors.phone, это работает, но возвращает объектный телефон, а не ошибку проверки.

Я думаю, мне нужно инициализировать errors.phone но я не знаю, как использовать переменную v-slot вне провайдера.

Надеюсь, вы понимаете мою проблему, и спасибо всем за помощь!

Answer 1

Думаю, ты близок к тому, чтобы получить это право. Внутри ValidationProvider вы используетеerrorsпрямо. Внутри ValidationObserver (но за пределами VP) вы используетеerrors[<vid>]. В вашем примере неясно, чтоvid вашего вице-президента на самом деле является "телефоном", но при условии, что это так, все, что вам нужно сделать, это изменить код вице-президента, чтобы он выглядел так:

<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>