VueJS Custom Validation Function

Sono nuovo di VueJS, quindi ho seguito la loro guida ufficiale .

Sono in grado di triggersre il primo 5 validatore di proprietà, ma non riesco a essere in grado di triggersre l’ultimo esempio (funzione di convalida personalizzata).

il mio file JS:

Vue.component('propValidation', { props: { // basic type check (`null` means accept any type) propA: Number, // multiple possible types propB: String, // a required string propC: { type: String, required: true }, // a number with default value propD: { type: Number, default: 100 }, // object/array defaults should be returned from a // factory function propE: { type: Object, default: function () { return { message: 'hello' } } }, // custom validator function propF: { type: Number, validator: function (value) { console.log("inside validator: " + value); return value > 10; } } }, template:"
" + "

PropA (Number): {{propA}}

" + "

PropB ([String, Number]): {{propB}}

" + "

PropC (Require String): {{propC}}

" + "

PropD (Default Number): {{propD}}

" + "

PropE (Default Object/Array): {{propE}}

" + "

PropF (Custom Validator): {{propF.validator()}}

" + "
" }); new Vue({ el:"#example" });

e il file HTML:

 

e infine il risultato:

 PropA (Number): 200 PropB ([String, Number]): string PropC (Require String): Require String PropD (Default Number): 100 PropE (Default Object/Array): { "not": "wee" } PropF (Custom Validator): 

con l’avvertimento:

[Vue warn]: Invalid prop: custom validator check failed for prop "propF". (found in component )

Grazie in anticipo

modifica: Ora che ci penso, è necessario restituire “true” come output o semplicemente avvisare che non è corretto? Potrei averlo visto in modo diverso e mi aspetto che il valore restituito sia vero / falso.

Secondo i documenti:

È ansible che un componente specifichi i requisiti per gli oggetti di scena che sta ricevendo. Se un requisito non viene soddisfatto, Vue emetterà avvisi. Ciò è particolarmente utile quando si crea un componente destinato ad essere utilizzato da altri.

Quello che stanno dicendo qui è che i validatori specificati devono essere soddisfatti in ogni momento affinché questa proprietà funzioni correttamente. In caso contrario, emetteranno un avviso, proprio come quello che stai vivendo.

Quando definisci il validatore in questo modo, stai dicendo che tutti gli input per questo validatore specifico dovrebbero essere maggiori di 10.

  validator: function (value) { console.log("inside validator: " + value); return value > 10; } 

Quindi quando si associa il numero 5 come valore a questa proprietà specifica, il validatore restituisce false e emette l’avviso.

Potresti voler controllare le proprietà vue :

 import {biggerThan} from 'vue-properties'; export default { props: { canDrink: { type: Integer, validator: biggerThan(18) }, } }