2

我尝试在标签之外使用 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 变量。

希望大家能理解我的问题，谢谢大家的帮助！

4

1 回答 1

0

我想你已经接近拥有这个权利了。在 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>
于 2019-12-13T16:20:21.367 回答