Vuelidate custom validation function in Vue.js

Question

I am using vuelidate to implement validation and trying to access whole data object from custom function (I have read that 2nd parameter takes the data object), but it is only getting observer and it has only the data of same level in hierarchy.

I have applied custom validation on x11, then I am getting only x11 and x12 in 2nd parameter, not the whole object.

customFunction(value, wholeObject)
{
console.log(value); //value of x11
console.log(wholeObject); // it is printing observer x11 and x12. I was         
expecting //it will print the whole x object
}

data: {
    x: {
        x1: {
            x11,
            x12
        },
        x2
    }
},

validations: {
    x: {
        x1: {
            x11: CustomFunction,
            x12
        },
        x2
    }
}

Is it the correct behavior or am I doing something wrong?

Answer 1

Can you try using following code:

function customFunction(value) {
    console.log(value);
    console.log(this);
    return value != '';
}

data: {     
    x: {
        x1: { x11: 'abc', x12: 'pqr'},
        x2: 'lmn'
    }
}

validations: {
    x: {
        x1: {
            x11: CustomFunction,
            x12: required
        },
        x2: required
    }
}

Fiddle -> https://jsfiddle.net/7atc5mwr/

Please read this page to understand how to use custom validators along and access component.