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

Question

我目前正在将一组道具“propSet”传递给一个子组件。计算道具并检测“编辑模式”布尔值并相应更改。

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

除了“规则”之外，所有道具都有效。每次子组件使用“propSet”的“editMode == true”配置时，我都会在控制台中收到以下错误消息：

[Vue 警告]：无效的道具：道具“规则”的类型检查失败。预期的 数组，得到对象

我尝试了很多事情，但特别是，我尝试过：

• 为规则数组的子组件添加类型验证

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

• 利用 Object.entries() 将对象更改为数组

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

• 更改规则 - 尝试以几种不同的方式配置规则

  •  //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 问题。

我想我可能只是遗漏了一些非常明显的东西。

为了简洁起见，这是一个带有一组不同道具的代码笔，它演示了问题：

Pass-Rules-As-Prop

Answer 1

Vuetify 的 Text 字段组件的 rules 属性应该是一个数组：

Vuetify 包括通过 rules 属性进行的简单验证。该道具接受function、boolean 和string 类型的混合数组。当输入值改变时，数组中的每个元素都会被验证。函数将当前 v-model 作为参数传递，并且必须返回 true / false 或包含错误消息的 string。

见：Text field component - 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"; }
    ]