TypeError：无法读取 null 的属性“任何”
Posted
技术标签:
【中文标题】TypeError：无法读取 null 的属性“任何”【英文标题】：TypeError: Cannot read property 'any' of null 【发布时间】：2017-09-02 02:31:03 【问题描述】：我在 laravel 5.3 的项目中使用 vue js 框架，并且我使用 vee-validate 来验证 html 表单。 但是构建自定义验证时的问题未定义错误！我认为冲突是成立的！但我无法克服这个问题
控制台出错..
TypeError: 无法读取 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">×</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);
【问题讨论】：
【参考方案1】：在您的data 中，您将error 设为空
errors: null,
Mounted 方法会在组件创建后调用。
所以
这一行
<span v-show="errors.any()" class="error">Please complete your DOB</span>
会产生错误，因为error为null！
尝试在v-show之前添加v-if="error && error.length > 0
你可以see in docs v-if 是懒惰的......
v-if 也是惰性的：如果条件在初始渲染时为假，它不会做任何事情 - 条件块不会被渲染，直到条件第一次变为真。
[添加]
你可以做..
<template v-if="errors && errors.length > 0">
<span v-show="errors.any()" class="error">Please complete your DOB</span>
</template>
【讨论】：
@Sam，如果您为此提供 jsfiddle.net 会更好。 1.你可以保留mounted, 2 TypeError 可能是你写错了。如果err 为空，err && err.length > 0 表达式将不会计算 .length！
请检查我的回答中的添加部分。
它可以工作，但是 vee 验证中的必填字段不起作用！我如何将所需的选择设置为下拉菜单？不是（日、月、年）这是禁用的
这是另一个问题，您需要为此创建一个新问题。以上是关于TypeError：无法读取 null 的属性“任何”的主要内容，如果未能解决你的问题，请参考以下文章
TypeError：无法读取 null 的属性（读取“classList”）
TypeError：无法读取 null 的属性（读取“1”）
TypeError：无法读取 null 的属性“userID”