vee-validate：是否可以在不更改当前名称的情况下更改字段包名称？

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')}"
/>

选择字段的名称是“day”。 不过根据this，应该命名为："bday-day"。

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

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

观看路径失败：“bday-day”Watcher 仅接受简单的点分隔路径。要完全控制，请改用函数。

这是因为我必须强制 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 validate 的字段名称设置为 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 和 vid。

VeeValidate's docs specify that:

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

vid 是用于基于目标/跨字段的规则的标识符。

不过，根据我的测试，vid 也用作ValidationObserver 中fields 和errors 的键（如果提供），如果没有，则回退到name。

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

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

Answer 3

如果您使用的是 VeeValidate v3，您可以为 ValidationProvider 设置“名称”属性

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