Vue - Pass Rules Array to Child Component

Question

I am currently passing a set of props, "propSet", to a child component. The props are computed and detect an 'edit mode' boolean and change accordingly.

"propSet" defines the following form input props: color, filled, dense, outlined, readonly, required, and rules.

All the props work, except for "rules". I receive the following error message in the console every time a child component uses the 'editMode == true' configuration of "propSet":

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

I have tried quite a few things, but in particular, I've tried to:

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",
  }],

I've read the documentation for Props several times, and I haven't seen an answer to my issue there (unless I'm overlooking it). I've also read the documentation I could find related to the rules array in the Vuetify API.

I've also read quite a few SO questions related to Vue.js, props, and components.

I think I might just be missing something very obvious.

Here is a codepen with a different set of props for brevity's sake, which demonstrates the problem:

Pass-Rules-As-Prop

user_1760467 · Answer

The rules prop of Vuetify's Text field component is expected to be an array:

Vuetify includes simple validation through the rules prop. The prop accepts a mixed array of types function, boolean and string. When the input value changes, each element in the array will be validated. Functions pass the current v-model as an argument and must return either true / false or a string containing an error message.

See: Text field component - Vuetify

However, in your parent's data, you define rules as an object with your validation functions (instead of an array that contains those functions):

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

If you change it to the following, it should work:

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

Note that in both versions, you are declaring anonymous functions. If you want to keep the function name for reference, you could use named functions like so:

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

Vue - Pass Rules Array to Child Component

1 Answers