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

选择字段的名称是“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"for autofill，但我会将 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"
>

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