Vee-validate: "[vee-validate]: Extension Error: There is an existing validator with the same name 'xxxx'."

[ash0080]

created() {
    this.$validator.extend('verify_image',{
        getMessage:(filedName)=>`${filedName} .`,
            validate: (value) => {
                return value
            }
        });

when I extend a custom rule in a component and create multiple instance,
the console throw an error like this

Does need custom rule a local scope?
or exist some function to check if a name has been registered?

[ash0080]

I checked the source code, seems Rules is an external Object and not belong validator instance, so have no possible to call it inside this.$validator

static _guardExtend(name, validator) {
        if (Rules[name]) {
            throw new ValidatorException(
                `Extension Error: There is an existing validator with the same name '${name}'.`
            );

[logaretm]

Validators all share the same scope for the following: rules, dictionary, and locale

the error occurs because the created() cycle is executed more than one time, probably because you are using a component more than once in a page, or that you are visiting the route that triggers that component more than one time.

To avoid this issue you should extend the validator in your entry file main.js where your application code is being bootstrapped, that way you make sure there is only one instance of that custom rule. which is recommended either way since you can use that rule anywhere in your code.

or use $validator.remove(ruleName) to remove a rule from the list of validations if it exists.

I probably should add a method to check if a rule exists.

[ash0080]

Yes, I used a listable component in one page, resolved