In vue, how to pass verification rules using vee-validate,

in the vue project, there are the following parent components:

 <sku-batch-modify-modal placeholder="JD price" :rule="required|numeric"></sku-batch-modify-modal>

then there is something in the subcomponent:

  <input type="text" name="batchValue" :placeholder="placeholder" v-model="batchValue" :v-validate="rule"/>

the subcomponent receives the rules for verifying vee-validate through props,

props: {
    rule: {
    type: String,
    default: ""
    }
}

but the console reported an error:

[Vue warn]: Failed to resolve filter: numeric
[Vue warn]: Property or method "required" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

could you tell me how to pass the verification rules for vee-validate?

Mar.02,2021

first, parent component:
< sku-batch-modify-modal placeholder= "JD price" rule= "required | numeric" > < / sku-batch-modify-modal >
then, child component:

<input type="text" name="batchValue" :placeholder="placeholder" v-model="batchValue" v-validate="rule"/>

  1. defines the verification rule as a method, which is passed through the method;
  2. reference: how Vue validates using vee-validate forms

required | numeric and try enclosing it in single quotation marks

:rule="'required|numeric'"

there is a question, why not use it directly in the component?

Menu