Как настроить валидацию формы (Vue, Element)?

Question

[beduin01]

Код на 90% совпадает с примером из документации

https://jsfiddle.net/st56h3ky/

Разница лишь в том, что у меня добавлен новый уровень вложенности. А именно dynamicValidateForm вложен в MainForm.

Однако я получаю ошибку Cannot read property 'domains' of undefined.
Задача простая - выполнить валидацию вложенного объекта.

Если убрать вложенность MainForm то все работает, но мне нужно именно с ней.

Подозреваю, что проблема где-то тут: :prop="'domains.' + index + '.value'".

Answer 1

[0xD34F]

Вместо :model="MainForm" должно быть :model="MainForm.dynamicValidateForm".

А :rules="rules" замените на :rules="rules.value".

UPD. Вынесено из комментариев:

а могу я сослаться :model="MainForm" в главной форме, а в props передать dynamicValidateForm

Нет проблем:

:prop="`dynamicValidateForm.domains.${index}.value`"

Comments

[beduin01]

0xD34F скажи, а могу я сослаться :model="MainForm" в главной форме, а в props передать dynamicValidateForm. Просто если в главной форме я укажу :model="MainForm.dynamicValidateForm" то внутри формы я не смогу создать какую-либо :model="MainForm.Foo".
Тогда валидация сломается.

[0xD34F]

beduin01, дополнил ответ.

[beduin01]

0xD34F, блин, большое человеческое спасибо, реально застрял, ты меня реально выручил. Сейчас буду проверять твое решение.

[beduin01]

0xD34F, а :key какой правильный прописать?

[beduin01]

И еще вопрос. Когда нужно двоеточия ставить а когда нет? В примерах props то с ним, то без

[0xD34F]

beduin01, читайте документацию vue.

Answer 2

[Luke LikeSkywalker]

У тебя в проекте весь этот код в формате .vue? Если да то data должна быть функцией, а не обьектом

Comments

[beduin01]

Да, но для jsfeedle я подготовил упрощенный пример.

Answer 3

[PloAl]

Внутри data не должно быть объектов иначе они не будут реактивными, т.е. изменения объектов внутри data в vue не отслеживается.
Могут быть массивы, но и с массивами есть ограничения, не все методы массивов отслеживаются.

Comments

[beduin01]

А как же тогда в примере https://element.eleme.io/#/en-US/component/form#de... они туда `dynamicValidateForm` кладут? Вот уже один уровень вложенности есть

[PloAl]

По ссылке с примером выкидывает на главную страницу