1

几周前，我最近使用 Vee-Validate 的 Vuelidate 对我们所有的应用程序进行了转换，到目前为止，我一直很喜欢它的灵活性；但是，我遇到了一个我不太确定如何解决的问题......

我在此处使用我的真实数据添加了（原始）示例：

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上时需要这些字段（并且还将具有不同的验证，我不确定如何解决，又不硬编码所有内容）。我已经尝试通过使验证成为一个函数来循环数据，但即使它似乎可以编译，它也不会基于将 question[index].value 设置为 true 来动态添加任何验证。

我觉得必须有一个简单的方法来做到这一点，但在这一点上我肯定是想多了。任何帮助将不胜感激！

谢谢！

4

0 回答 0