TypeError: Cannot read property 'any' of null

Question

I use vue js framework in my project with laravel 5.3 ,, and i use vee-validate to validate html form .. but the problem when building custom validation not defined errors !! i think that conflict founded ! but i can't overcome this problem

Error in console ..

TypeError: Cannot read property 'any' of null

EditInfo.vue

<template>
<div class="bootstrap-iso">
    <button type="button" class="close" aria-label="Close" style="float: right;" @click.prevent.stop="switchComponent">
        <span aria-hidden="true">&times;</span>
    </button>&nbsp;
    <hr>
    <strong>Describe who you are ..</strong><textarea class="form-control" placeholder="Bioooo ..."></textarea>
    <hr>
    <strong>Where are you from ?</strong>
    <!--<vue-google-autocomplete id="map" classname="form-control" placeholder="Please type your address" v-on:placechanged="getAddressData" country="sg"></vue-google-autocomplete>-->
    <input name="country" id="country" type="text" class="form-control" placeholder="Location ...">
    <hr>
    <strong>Where did you study university level ?</strong><input type="text" class="form-control" placeholder="University ...">
    <hr>
    <!--<strong>Your phone number ..</strong><input type="text" class="form-control" placeholder="Phone ...">-->
    <!--<hr>-->
    <div class="row">
        <div class="col-lg-8">
            <strong>When were you born ?</strong>
        </div>
    </div>
    <div class="row">
        <div class="col-md-4" style="">
            <select class="form-control" v-model="selectDay" name="selectDay">
                <option selected disabled>Day</option>
                <option v-for="day in days" :value="day">{{day}}</option>
            </select>
        </div>
        <div class="col-md-4" style="margin-left: -20px;width: 120px">
            <select class="form-control" v-model="selectMonth" name="selectMonth">
                <option selected disabled>Month</option>
                <option v-for="month in months" :value="month">{{month}}</option>
            </select>
        </div>
        <div class="col-sm-4" style="margin-left: -20px;width: 110px">
            <select class="form-control" v-model="selectYear" name="selectYear">
                <option selected disabled>Year</option>
                <option v-for="year in years" :value="year">{{year}}</option>
            </select>
        </div>
    </div>
    <span v-show="errors.any()" class="error">Please complete your DOB</span>
        <!--<input type="text" class="form-control" placeholder="Birthday ...">-->

    <hr>
    <div class="controlButtons" style="float: right">
        <input type="submit" class="btn btn-info" value="Save" @click="validateForm">
        <button class="btn btn-default" @click.prevent.stop="switchComponent">Close</button>
    </div>
</div>
 </template>

 <script>
 import VueGoogleAutocomplete from 'vue-google-autocomplete'
 import VeeValidate from 'vee-validate'
 Vue.use(VeeValidate)
 export default{
    validator: null,
    data(){
        return{
            selectDay:'Day',
            selectMonth:'Month',
            selectYear:'Year',
            errors: null,
            days:[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,222,23,24,25,26,27,28,29,30,31],
            months:['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
            years:[2017,2016,2015,2014,2013,2012,2011,2010,2009,2008,2007,2006,2005,2004,2003,2002,2001,2000,1999,1998,1997,1996,1995,1994,1993,1992,1991,1990,1989,1988,1987,1986,1985,1984,1983,1982,1981,1980,1979,1978,1977,1976,1975,1974,1973,1972,1971,1970,1969,1968,1967,1966,1965,1964,1963,1962,1961,1960,1959,1958,1957,1956,1955,1954,1953,1952,1951,1950]

        }
    },
    methods:{
        switchComponent:function () {
            jQuery('#switchToView')[0].click();
            $("body").scrollTop(0);
            return false;
        },
        changeSelect: function (event) {

        },
        validateForm:function () {
            this.validator.validateAll({
                selectDay: this.selectDay,
                selectMonth: this.selectMonth,
                selectYear: this.selectYear
            });
        }
    },
    watch:{
        selectDay(value){
            this.validator.validate('selectDay', value);
        },
        selectMonth(value){
            this.validator.validate('selectMonth', value);
        },
        selectYear(value){
            this.validator.validate('selectYear', value);
        }
    },
    mounted: function () {
        require('../../../../public/js/country/country.js')
        this.validator = new VeeValidate.Validator({
                selectDay:{
                    required:function () {
                        if(this.selectMonth != 'Month' || this.selectYear != 'Year')
                            return true;
                        else
                            return false;
                    }
                },
                selectMonth:{
                    required:function () {
                        if(this.selectDay != 'Day' || this.selectYear != 'Year')
                            return true;
                        else
                            return false;
                    }
                },
                selectYear:{
                    required:function () {
                        if(this.selectDay != 'Day' || this.selectMonth != 'Month')
                            return true;
                        else
                            return false;
                    }
            }
        });
        this.$set(this, 'errors', this.validator.errorBag);
    }
}

Answer 1

In your data you put error as null

errors: null,

Mounted method will call after the component created.

So

This line

 <span v-show="errors.any()" class="error">Please complete your DOB</span>

Will generate a error because error is null!

Try add v-if="error && error.length > 0 before v-show

As you can see in docs v-if is lazy ...

v-if is also lazy: if the condition is false on initial render, it will not do anything - the conditional block won’t be rendered until the condition becomes true for the first time.

[ADDED]

You can do ..

<template v-if="errors && errors.length > 0">
    <span v-show="errors.any()" class="error">Please complete your DOB</span>
</template>