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.

Я чувствую, что должен быть простой способ сделать это, но я определенно обдумываю это в данный момент. Любая помощь будет принята с благодарностью!

Спасибо!

0 ответов

Другие вопросы по тегам