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'] //originalprops: { propSet: Array } //updatedUtilized 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:
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,booleanandstring. 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 eithertrue/falseor astringcontaining 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"; }
]