Actualmente estoy pasando un conjunto de accesorios, "propSet", a un componente secundario. Los accesorios se calculan y detectan un booleano de 'modo de edición' y cambian en consecuencia.
"propSet" define los siguientes accesorios de entrada de formulario: color, relleno, denso, delineado, solo lectura, requerido y reglas .
Todos los accesorios funcionan, excepto las "reglas". Recibo el siguiente mensaje de error en la consola cada vez que un componente secundario usa la configuración 'editMode == true' de "propSet":
[Advertencia de Vue]: accesorio no válido: la verificación de tipo falló para las "reglas" de accesorios. Matriz esperada, objeto obtenido
He intentado bastantes cosas, pero en particular, he intentado:
Agregar validación de tipo al componente secundario para la matriz de reglas
props: ['propSet'] //originalprops: { propSet: Array } //updatedObject.entries utilizado () para cambiar el objeto a una matriz
var rulesSet = Object.entries(this.rules)Cambiar reglas: intenté configurar las reglas de varias maneras diferentes
//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", }],He leído la documentación de Props varias veces y no he visto una respuesta a mi problema allí (a menos que lo esté pasando por alto). También he leído la documentación que pude encontrar relacionada con la matriz de reglas en la API de Vuetify.
También he leído bastantes preguntas de SO relacionadas con Vue.js, accesorios y componentes.
Creo que me estoy perdiendo algo muy obvio.
Aquí hay un codepen con un conjunto diferente de accesorios por razones de brevedad, que demuestra el problema:
Se espera que la propiedad de rules del componente de campo de texto de Vuetify sea una matriz:
Vuetify incluye validación simple a través de reglas prop. El prop acepta una matriz mixta de tipos
function,booleanystring. Cuando el valor de entrada cambie, se validará cada elemento de la matriz. Las funciones pasan el modelo v actual como argumento y deben devolvertrue/falseo unastringque contenga un mensaje de error.
Ver: Componente de campo de texto - Vuetify
Sin embargo, en los datos de sus parent , define rules como un objeto con sus funciones de validación (en lugar de una matriz que contiene esas funciones):
rules: { required: (v) => !!v || "This field is required", autoComplete: (v) => !!(v && v.length) || "This field is required" }Si lo cambia a lo siguiente, debería funcionar:
rules: [ (v) => !!v || "This field is required", (v) => !!(v && v.length) || "This field is required" ]Tenga en cuenta que en ambas versiones, está declarando funciones anónimas. Si desea mantener el nombre de la función como referencia, puede usar funciones con nombre como esta:
rules: [ function required(v) { return !!v || "This field is required"; }, function autoComplete(v) { return !!(v && v.length) || "This field is required"; } ]