我在 laravel 5.3 的项目中使用 vue js 框架，并且我使用 vee-validate 来验证 html 表单 .. 但是构建自定义验证时的问题未定义错误！我认为冲突是成立的！但我无法克服这个问题
控制台出错..
TypeError：无法读取 null 的属性“任何”
编辑信息.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">×</span>
</button>
<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);
}
}