Vuelidate: условное добавление моделей проверки
Я недавно сделал переход с Vuelidate от Vee-Validate несколько недель назад для всех наших приложений и до сих пор люблю его гибкость; Тем не менее, я столкнулся с проблемой, которую я не совсем уверен, как решить...
Я добавил (примитивный) пример, используя мои реальные данные здесь:
https://jsfiddle.net/80cuuagp/18/
С скрипки:
new Vue({
el: "#app",
data() {
return {
questions: [
{
message: '1. Do you expect to conduct cash transactions for this account? ',
value: false,
conditionalFields: [
{
title: 'Cash In',
fields: [
{ label: 'Total Amount', value: '' },
{ label: 'Frequency', value: '' }
]
},
{
title: 'Cash Out',
fields: [
{ label: 'Total Amount', value: '' },
{ label: 'Frequency', value: '' }
]
}
]
},
{
message: '2. Will Electronic (ACH) transactions be processed on the account (excluding card transactions)?',
value: false,
conditionalFields: [
{
title: 'Electronic Deposits',
fields: [
{ label: 'Total Amount', value: '' },
{ label: 'Frequency', value: '' }
]
},
{
title: 'Electronic Withdrawals',
fields: [
{ label: 'Total Amount', value: '' },
{ label: 'Frequency', value: '' }
]
}
]
},
{
message: '3. Will Domestic Wires be sent or received from the account?',
value: false,
conditionalFields: [
{
fields: [
{ label: 'Frequency of Incoming Wires', value: '' }
]
},
{
fields: [
{ label: 'Frequency of Outgoing Wires', value: '' },
]
}
]
},
{
message: '4. Will International Wires be sent or received from the account?',
value: false,
conditionalFields: [
{
fields: [
{ label: 'Frequency of Incoming Wires', value: '' }
]
},
{
fields: [
{ label: 'Frequency of Outgoing Wires', value: '' },
]
}
]
},
{
message: '5. Will Monetary Instruments (CC/MO) be issued from the account?',
value: false,
conditionalFields: [
{
fields: [
{ label: 'Total Amount', value: '' }
]
}
]
}
]
}
},
validations: {
questions: {
$each: {
conditionalFields: {
$each: {
fields: {
$each: {
value: { required }
}
}
}
}
}
}
}
})
Проблема в том, что я условно рендеринг полей на основе ввода пользователя. Если он или она выбирает "Да" на любой из вопросов, под ним появится дополнительный набор полей и будет запрашиваться ввод. Эти поля обязательны для заполнения, только если выбрано yes, и они появляются в DOM (и также будут иметь различные проверки, которые я не знаю, как обращаться, либо без жесткого кодирования всего). Я пробовал циклически проходить по данным, делая валидации функцией, но, хотя они и компилируются, динамически не добавляются какие-либо валидации, основанные на том, что для вопроса [index].value установлено значение true.
Я чувствую, что должен быть простой способ сделать это, но я определенно обдумываю это в данный момент. Любая помощь будет принята с благодарностью!
Спасибо!