vue.js - 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')，我也无法使用我的内部观察器来更改值。我收到错误:

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 观察路径的那个令人讨厌的问题。