vee-validate：是否可以在不更改当前名称的情况下更改 fields-bag-name？

Question

所以我想调整生日的自动填充命名。然而，这会导致几个问题。现在我需要找出是否可以强制 vee-validate 更改字段名称。

更好地理解它。这是它目前的样子：

<select
    v-model="day"
    id="day"
    name="day"
    :class="{'invalid' : errors.has('day')}"
    v-validate="'required|excluded:0'"
>
    <option
        :disabled="true"
        value="0"
        v-text="trans('food.Day')"
    />
    <option
        v-for="n in 31"
        :key="n"
        :value="n"
        v-text="n"
    />
</select>

<span
    class="bar"
    :class="{'invalid' : errors.has('day')}"
/>

select 字段的名称是 "day"。但是根据this，应该命名为："bday-day".

由于我使用的是 vee-validate，这导致将字段名称重命名为 "bday-day"。现在 errors.has('day')} 将不再起作用。

但即使我将其更改为 errors.has('bday-day')，我也无法使用我的内部观察器来更改值。我收到错误：

Failed watching path: "bday-day" Watcher only accepts simple dot-delimited paths. For full control, use a function instead.

这是因为我必须强制v-model 名称和vee-validate 名称相同。 v-model="bday-day" 无法工作。

简而言之。我的最终目标是这样的：

<select
    v-model="day"
    id="day"
    name="bday-day"
    :class="{'invalid' : errors.has('day')}"
    v-validate="{required: true, excluded: 0, name: 'day'}"
>
    <option
        :disabled="true"
        value="0"
        v-text="trans('food.Day')"
    />
    <option
        v-for="n in 31"
        :key="n"
        :value="n"
        v-text="n"
    />
</select>

<span
    class="bar"
    :class="{'invalid' : errors.has('day')}"
/>

我会使用 name="bday-day" 进行自动填充，但我会将 vee 验证的字段名称设置为 name: 'day'。

Answer 1

使用 `data-vv-name` 属性

Vee-validate 涵盖了您，您可以设置属性 data-vv-name 来实现这一点：

<select
    v-model="day"
    id="day"
    name="bday-day"
    :class="{'invalid' : errors.has('day')}"
    v-validate="'required|excluded:0'"
    data-vv-name="day"
>

现在 vee-validate 提供的 errors 和 fields 成员将有一个 day 条目，而不是使用输入名称 bday-day。因此，如果你在 errors.day 上有一个观察者，你就不会在 bday-day 观察路径上遇到那个讨厌的问题。

Answer 2

如果您使用 VeeValidate v3，您可以为 ValidationProvider

设置 "name" 属性

<ValidationProvider name="day" rules="required|excluded:0" v-slot="{ errors }">

Answer 3

使用 VeeValidate v3，您可以将两个相关选项传递给 ValidationProvider、name 和 vid。

VeeValidate's docs specify that:

name 指定要在错误消息中使用的字段名称。

vid 是用于基于 target/cross-field 规则的标识符。

虽然从我的测试来看，vid 也用作 ValidationObserver 中 fields 和 errors 的键（如果提供的话），如果没有，它会回退至 name.

因此，如果您在一个表单中有多个相同的字段，并且您希望有一个唯一的键名（这样它们就不会冲突和中断），那么使用 name 仅用于错误消息中的字段名称，使用 vid 提供唯一 ID，供 fields 和 errors 对象中的 ValidationObserver 使用. 例如：

<ValidationProvider
  name="hours" // used for error messages
  :vid="hours-${unique-part}" // unique key to stop clashes
  rules="required"
  v-slot="{ errors }"
>...</ValidationProvider>

vee-validate：是否可以在不更改当前名称的情况下更改 fields-bag-name？

vee-validate: Is it possible to change the fields-bag-name without changing the current name?

vue.js

vee-validate

使用 `data-vv-name` 属性

vee-validate：是否可以在不更改当前名称的情况下更改 fields-bag-name？

vee-validate: Is it possible to change the fields-bag-name without changing the current name?

vue.js

vee-validate

使用 data-vv-name 属性

使用 `data-vv-name` 属性