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>]。在您的示例中，您的 VP 的 vid 实际上是“电话”并不清楚，但假设是，您需要做的就是将您的 VP 代码更改为如下所示：

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