Vue - 将规则数组传递给子组件

Question

我目前正在将一个名为“propSet”的props集传递给子组件，这些props是计算出来的，并检测一个'编辑模式'布尔值并相应更改。

“propSet”定义了以下表单输入props：color、filled、dense、outlined、readonly、required和rules。

所有的props都有效，只有“rules”无效。每次子组件使用“propSet”的“editMode == true”配置时，我都会在控制台收到以下错误消息:

[Vue warn]: Invalid prop: type check failed for prop "rules". Expected Array, got Object

我尝试了很多方法，特别是我尝试了：

• Add type validation to the Child Component for the rules array

  • props: ['propSet'] //original
  • props: { propSet: Array } //updated

• Utilized Object.entries() to change the object to an array

  • var rulesSet = Object.entries(this.rules)

• Change rules - tried to configure the rules several different ways

  •  //original  
     rules: {
        required: (v) => !!v || "This field is required",
        autoComplete: (v) => !!(v && v.length) || "This field is required",
      },
    

  •  //updated
     rules: [{
       required: (v) => !!v || "This field is required"},{
       autoComplete: (v) => !!(v && v.length) || "This field is required",
      }],
    

我已经多次阅读了Props的文档，但我没有找到解决我的问题的答案（除非我漏看了）。我也阅读了与Vuetify API中规则数组相关的文档。我还阅读了许多与Vue.js、props和组件相关的SO问题。我认为我可能只是忽略了非常明显的东西。为了简洁起见，这里有一个具有不同一组props的代码片段，展示了该问题：Pass-Rules-As-Prop。

- Conan Stuart

Answer 1

Vuetify的文本字段组件中的rules属性应该是一个数组。Vuetify通过rules属性提供简单的验证。该属性接受一个混合类型的数组，包括function、boolean和string。当输入值发生变化时，将对数组中的每个元素进行验证。函数将当前v-model作为参数传递，并且必须返回true/false或包含错误消息的string。请参见：文本字段组件 - Vuetify。然而，在您的parent数据中，您将rules定义为一个对象，其中包含您的验证函数（而不是包含这些函数的数组）。

    rules: {
      required: (v) => !!v || "This field is required",
      autoComplete: (v) => !!(v && v.length) || "This field is required"
    }

如果你将它改成以下内容，应该就可以正常工作了：

    rules: [
      (v) => !!v || "This field is required",
      (v) => !!(v && v.length) || "This field is required"
    ]

请注意，在这两个版本中，您都在声明匿名函数。如果您想保留函数名称以供参考，可以使用命名函数，如下所示：

    rules: [
      function required(v) { return !!v || "This field is required"; },
      function autoComplete(v) { return !!(v && v.length) || "This field is required"; }
    ]

- Jacob Mellin