vee-validate: возможно ли изменить fields-bag-name без изменения текущего имени? - PullRequest
Новая
       5

vee-validate: возможно ли изменить fields-bag-name без изменения текущего имени?

3 голосов
/ 29 марта 2019

Итак, я хочу адаптировать именование автозаполнения к дням рождения. Однако это приводит к нескольким проблемам. Теперь мне нужно выяснить, могу ли я заставить 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')}"
/>

Имя для поля выбора - "день". Однако, согласно this , оно должно называться: "bday-day".

Поскольку я использую vee-validate, это приводит к переименованию имени поля в "bday-day". Теперь errors.has('day')} больше не будет работать.

Но даже если я изменю это значение на errors.has('bday-day'), я не смогу использовать свой внутренний наблюдатель для изменений значений. Я получаю ошибку:

Неудачный путь просмотра: наблюдатель "bday-day" принимает только простые пути с разделителями точками. Для полного контроля используйте функцию.

Это потому, что мне нужно задать одно и то же имя для v-модели и для 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'.

1 Ответ

4 голосов
/ 29 марта 2019

Используйте атрибут 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 вместо использования имени входа bday-day.Таким образом, если у вас есть наблюдатель на errors.day, у вас не будет этой неприятной проблемы с bday-day траекторией наблюдения.

...