Question

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

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

来自小提琴：

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来动态添加任何验证。

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

谢谢！

Vuelidate：有条件地添加验证模型

0 个答案: