类型错误:无法读取 null 的属性“任何”

山姆

我在我的项目中使用 vue js 框架和 laravel 5.3,并且我使用 vee-validate 来验证 html 表单..但是构建自定义验证时的问题未定义错误!我认为冲突成立了!但我无法克服这个问题

控制台错误..

类型错误:无法读取 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">&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);
    }
}

骑手

在你data你把它error设为空

errors: null,

Mounted 方法将在组件创建后调用。

所以

这条线

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

会产生错误,因为错误为空!

尝试添加v-if="error && error.length > 0之前v-show

正如你在文档看到的那样, v-if 是懒惰的......

v-if 也是惰性的:如果初始渲染时条件为假,它不会做任何事情 - 条件块不会被渲染,直到条件第一次变为真。

[添加]

你可以做 ..

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

类型错误:无法读取null的属性“名称”

来自分类Dev

类型错误:无法读取 null 的属性“id”

来自分类Dev

类型错误:无法读取 null 的属性“会话”

来自分类Dev

类型错误:无法读取 null 的属性“数据”

来自分类Dev

类型错误:无法读取 null 的属性“title”类型错误:无法读取 null 的属性“title”

来自分类Dev

如何修复:“类型错误:无法读取 null 的属性‘打印类型’”

来自分类Dev

错误类型错误:无法读取 null 的属性“map”

来自分类Dev

错误:未捕获的类型错误:无法读取 null 的属性“样式”

来自分类Dev

混淆JavaScript错误:无法读取null的属性“类型”

来自分类Dev

未捕获的类型错误:无法读取 null 的属性“ownerDocument”-ReactJS

来自分类Dev

离子中的“类型错误:无法读取 null 的属性‘findall’”

来自分类Dev

未捕获的类型错误:无法读取元素 null 的属性“文件”

来自分类Dev

“未捕获的类型错误:无法读取 null 的属性‘包含’”的实例

来自分类Dev

Discord.JS | 类型错误:无法读取 null 的属性“run”

来自分类Dev

类型错误:无法读取 React 组件中的 null 属性

来自分类Dev

类型错误:无法读取 null 的属性“值”| reactjs |

来自分类Dev

怎么修。类型错误:无法读取 null 的属性“用户”

来自分类Dev

未捕获(承诺)类型错误:无法读取 null 的属性“值”

来自分类Dev

未捕获的类型错误:无法读取 null 的属性“polyfillWrapFlushCallback”

来自分类Dev

类型错误:无法读取 null 的属性“first_name”

来自分类Dev

未捕获的类型错误:无法读取 null 的属性“焦点”

来自分类Dev

错误:无法读取 null 的属性

来自分类Dev

角度:错误类型错误:数据正确显示时,无法读取属性'choice_set'为null

来自分类Dev

如何修复“未捕获的类型错误:无法读取 null 的属性‘值’”错误?

来自分类Dev

错误类型错误:无法在 angular4 中读取 null 的属性“startsWith”

来自分类Dev

错误类型错误:无法读取 NGRX 效果中的 null 属性“管道”

来自分类Dev

类型错误:使用JavaScript删除行时,无法读取null的属性“行”

来自分类Dev

未捕获的类型错误:无法读取 HTMLButtonElement 处的 null 属性“innerHTML”

来自分类Dev

未捕获的类型错误:无法在帧处读取 null 的属性“样式”

Related 相关文章

  1. 1

    类型错误:无法读取null的属性“名称”

  2. 2

    类型错误:无法读取 null 的属性“id”

  3. 3

    类型错误:无法读取 null 的属性“会话”

  4. 4

    类型错误:无法读取 null 的属性“数据”

  5. 5

    类型错误:无法读取 null 的属性“title”类型错误:无法读取 null 的属性“title”

  6. 6

    如何修复:“类型错误:无法读取 null 的属性‘打印类型’”

  7. 7

    错误类型错误:无法读取 null 的属性“map”

  8. 8

    错误:未捕获的类型错误:无法读取 null 的属性“样式”

  9. 9

    混淆JavaScript错误:无法读取null的属性“类型”

  10. 10

    未捕获的类型错误:无法读取 null 的属性“ownerDocument”-ReactJS

  11. 11

    离子中的“类型错误:无法读取 null 的属性‘findall’”

  12. 12

    未捕获的类型错误:无法读取元素 null 的属性“文件”

  13. 13

    “未捕获的类型错误:无法读取 null 的属性‘包含’”的实例

  14. 14

    Discord.JS | 类型错误:无法读取 null 的属性“run”

  15. 15

    类型错误:无法读取 React 组件中的 null 属性

  16. 16

    类型错误:无法读取 null 的属性“值”| reactjs |

  17. 17

    怎么修。类型错误:无法读取 null 的属性“用户”

  18. 18

    未捕获(承诺)类型错误:无法读取 null 的属性“值”

  19. 19

    未捕获的类型错误:无法读取 null 的属性“polyfillWrapFlushCallback”

  20. 20

    类型错误:无法读取 null 的属性“first_name”

  21. 21

    未捕获的类型错误:无法读取 null 的属性“焦点”

  22. 22

    错误:无法读取 null 的属性

  23. 23

    角度:错误类型错误:数据正确显示时,无法读取属性'choice_set'为null

  24. 24

    如何修复“未捕获的类型错误:无法读取 null 的属性‘值’”错误?

  25. 25

    错误类型错误:无法在 angular4 中读取 null 的属性“startsWith”

  26. 26

    错误类型错误:无法读取 NGRX 效果中的 null 属性“管道”

  27. 27

    类型错误:使用JavaScript删除行时,无法读取null的属性“行”

  28. 28

    未捕获的类型错误:无法读取 HTMLButtonElement 处的 null 属性“innerHTML”

  29. 29

    未捕获的类型错误:无法在帧处读取 null 的属性“样式”

热门标签

归档