Проверка дочерних компонентов от родителя с помощью Vuelidate - PullRequest
Новая
       28

Проверка дочерних компонентов от родителя с помощью Vuelidate

0 голосов
/ 29 сентября 2019

Я не могу найти в документации Vuelidate, как можно проверить всю модель (включая дочерние компоненты). Проверка родительского компонента и каждого из дочерних компонентов не является проблемой, но я не смог найти способ проверки дочерних компонентов с использованием структуры validations в родительском компоненте.

Я предполагаю, что что-то должнобыть передан в качестве опоры для дочернего компонента.

Я нашел похожий вопрос по SO, но, похоже, ответ не полный и, к сожалению, он не помог.

Родительский компонент: 

validations: {
    payload: {
        name: {
            required,
            minLength: minLength(5)
        },
        description: {
            required,
            minLength: minLength(20)
        },
        // I assume that this should work if I want to perform validation from the parent component
        blocks: {
            $each: {
                priority: {
                    required,
                    integer,
                    between: between(-999, 999)
                },
                maxProcessed: {

                    minValue: minValue(1)
                },
                startTime: {
                    required,
                    isTime
                }
            }
        }
    }
}

Шаблон родительского компонента (части кода для краткости опущены) 

                    <div class="message-body">
                        <block  v-for="block in payload.blocks"
                               :key="block.id"
                               :type="'TEMPLATE'"
                               :block="block"
                               :selectedBlockId="selectedItem.block"
                               @selectBlock="selectBlock"
                               @removeBlock="removeBlock"></block>
                    </div>

Шаблон дочернего компонента (части кода для краткости опущены) 

    <div class="field">
        <div class="control has-icons-left has-icons-right">
            <input class="input is-small" type="text" placeholder="z.B. 300"
                   :class="{'is-danger':$v.block.priority.$invalid}" v-model="block.priority">
            <span class="icon is-left">
                <i class="fas fa-exclamation"></i>
            </span>
        </div>
        <p class="help is-danger" v-if="!$v.block.priority.required">Priority is required</p>
        <p class="help is-danger" v-if="!($v.block.priority.between && $v.block.priority.integer)">Priority has to be a number between -999 and 999</p>
    </div>

Дочерний компонент (с логикой проверки в дочернем компоненте) 

props: {
        block: {
            type: Object,
            required: true
        }
    },
    validations: {
        block: {
            priority: {
                required,
                integer,
                between: between(-999, 999)
            },
            maxProcessed: {

                minValue: minValue(1)
            },
            startTime: {
                required,
                isTime
            }
        }
    }
...