Vuelidate 无法按程序生成表单验证

Question

所以我目前正在努力将高度 re-usable 的表单提取到 VueJS (Vue2) 的子组件中。这种形式在我的实际应用程序中很长，因此我决定从 JSON 文件中按程序生成它，而不是对其进行硬编码。现在，我费了好大劲才让它开始工作，却找不到错误发生的地方。所以我做了以下更简单的版本来帮助找到问题。

https://jsfiddle.net/c2ba7p3r/（具体参见第 78-94 行和第 101-110 行）

进一步说明：

在此应用程序中，有一个包含所有表单数据的数组（与导入的 JSON 非常相似）。由 object 组成，每个代表表单的一部分。在每个所述 object 中，有一个标题属性，以及随后的 object 数组，将用于生成输入字段。像这样：

let example_array = [
   {
      title: "Section 1",
      inputs: [
         {
            // Input 1A
            id: "name",
            label: "Full Name",
            required: true,
            validate: { constraint: "minimum_text",   param: 2  }
         },
         {...}  // Input 1B
                // etc.
      ]
   },
   {
      title: "Section 2",
      inputs: [
         {...}, // Input 2A
         {...}  // Input 2B
                // etc.
      ]
   },
   // etc.
]

现在，这个表单模板数组作为 prop 传递给自定义表单组件。在自定义表单组件中，我从上面的 JSON 中提取所有输入，并将它们展平到一个数组中。从那里，我将从数组中获取这些输入中的每一个，并为每个输入添加一个属性到 data object（在 data 函数中）。

完成此操作后，我以类似的方式创建验证。在验证函数中，我遍历扁平化输入数组，提取 required 属性和 validate sub-object，并从中创建验证。

最后，我有了我的模板，它有一个嵌套 v-for 循环。第一个 v-for 遍历原始表单模板数组（作为道具传入），并创建每个部分，包括部分标题。从那里，我有第二个 v-for 循环生成每个表单部分的输入。

到目前为止，没有任何错误。但是，当然，问题就在这里……在模板生成的最后一点，我分配了条件错误 class，我无法使用表达式访问验证 object，这是必要的，因为v-for 为每个输入分配适当的验证。特别是，$v.inputs[input.id] 未定义，导致 $v.inputs['input.id'].$invalid（或 $error 或诸如此类）的访问失败。它不会因特定的属性访问而失败，例如 $v.inputs['name'] 或 $v.inputs['url'] 或诸如此类的东西，但是这违背了使用 v-for.

的目的

谁能发现我做错了什么？感觉我在库中发现了一个错误，但我怀疑真正发生的是我只是滥用了库或 JavaScript.

谢谢

Answer 1

您希望通过 form-error class

突出显示无效字段

    :class="{ 'form-error': $v.inputs[input.id].$invalid }"

但是您的 description 字段未经验证并且您的代码在 $v.inputs['description'].$invalid 上失败解决方案是为所有字段构建空验证散列

            { 
              type: "text",
              id: "description",
              label: "Site Description",
              validate: {},                //!!!!
            },

validations: function () {
    const validator = {
      inputs: {}
    }

        // Parse the validation rules passed in from the object (would likely be JSON)
    this.all_form_inputs.forEach((input) => {
      // * No validation is needed
      if(!input.required) {
        validator.inputs[input.id] = {} //!!!

        return
      }

https://jsfiddle.net/qzfm34sa/

这只是快速调试解决方案，希望您能构建一个更健壮的解决方案。

Vuelidate 无法按程序生成表单验证

Vuelidate unable to procedurally generate form validation

javascript

vue.js

vuejs2

vuelidate

进一步说明：