К в Vue-динамической форме организовать отображение ошибки?

Question

[pqgg7nwkd4]

Добрый день.

По дизайну форма имеет поля, имеет динамические поля (те что пользователь можно добавить/убавить). В случае, если пользователь ввел что-то некорректно, ошибка показывается под соответствующим полем.

Рассмотрим пример формы авторизации, где пользователю предлагается ввести логин, пароль и сколько угодно ролей:

<template>
    <FForm @submit="doAuth" ref="authForm">
        <FInputText caption="Имя пользователя" v-autofocus v-model="authForm.login"></FInputText>
        <FInputText caption="Пароль" password v-model="authForm.password"></FInputText>

        <div v-for="(_, index) in authForm.roles">
            <FInputText
                    caption="Роль"
                    v-model="authForm.roles[index].name"
            ></FInputText>
        </div>
        <button @click="addRole">+</button>

        <FButton caption="Войти" submit class="submit-button"></FButton>
    </FForm>
</template>

<script>
    export default {
        name: "Test",
        data() {
            return {
                authForm: {
                    roles: []
                }
            }
        },
        methods: {
            addRole() {
                this.authForm.roles.push({})
            },
            doAuth(e) {
                // ...
            }
        },
    }
</script>

Пользователь ввел неверно логин и вторую роль. Сервер передал следующий ответ:

{
  "errors": {
    "login": "Ошибка в логине",
    "role[1].name": "Ошибка во второй роли"
  }
}

Вопрос, как не усложняя шаблон (template) организовать отображение ошибок?

Усложнять реализацию FForm и FInputText можно сколько угодно.

Answer 1

[pqgg7nwkd4]

Блин, написал развернутый ответ. Нажал предпросмотр и забыл. А потом вернулся, обновил и... всё стерлось. 21 век, блин.

Сделал, что теперь можно делать так:

<FForm @submit="doAuth" v-model="authForm">
        <FInputText caption="Имя пользователя" v-autofocus f-name="login"></FInputText>
        <FInputText caption="Пароль" password f-name="password"></FInputText>

        <div v-array="roles">
            <FInputText
                    caption="Роль"
                    f-name="name"
            ></FInputText>
        </div>
        <button @click="rolesAdd({})">+</button>

        <FButton caption="Войти" submit class="submit-button"></FButton>
    </FForm>

где f-name и v-array работают интуитивно понятно, а собранный объект складывается в authForm, который определен в теге FForm.

Сделать можно много интересный вещей, которые нельзя сделать в vue из коробки. Копать в сторону модулей компилятора vue. Примеры тут: https://github.com/vuejs/vue/tree/dev/src/platform...

Answer 2

[Koteezy]

<FInputText
                    caption="Роль"
                    v-model="authForm.roles[index].name"
            ></FInputText>
<template v-if="hasRoleError(index)">
{{ errors.role[index].name }}
</template>

hasRoleError(index) {
  return this.errors.role && this.errors.role[index];
}

Отталкивайтесь от этого.

Возможно, индексы будут не правильные, может где-то потребуется не [index] а [--index]

Comments

[pqgg7nwkd4]

Это значительно усложнит шаблон.
Так можно было бы и в сам компонент спрятать отображение ошибки:

<FInputText
                    caption="Роль"
                    v-model="authForm.roles[index].name"
                    v-errors="authFormErrors.roles[index].name"
            ></FInputText>

Но это тоже усложняет. Придется по два раза писать одно и то же.

[Koteezy]

pqgg7nwkd4, Можно как угодно, я дал вам пример, можно не писать authForm.roles[index].name, а писать role.name, разве, нет? ( предварительно инициализировав свойства канешн)

[Koteezy]

pqgg7nwkd4, Если у вас ошибки будут там же где и authForm, можно просто задавать Ffinput пропс с путем к ошибки, вроде :error=`role[index].name`, обрабатывать его в компоненте, и брать ошибки через $parent, но это конечно бэд практик

upd: а, вы это выше и написали, я чет сплю. сорян

[pqgg7nwkd4]

Нашел способ через модуль компилятора vue. Прорабатываю