项目中自己用 Vue 封装了一个分页工具条.
但是最近却总是报这个错误.
vue.js:634 [Vue warn]: Invalid prop: type check failed for prop “pageindex”. Expected Number with value NaN, got MouseEvent

分页工具条的代码贴一下如下, (全当分享了. 此问题跟分页工具条的代码无关.)

VuePagebar.js的代码

Vue.component('v-pagebar', {
    //model: {
    //    prop: 'page_index'
    //},
    data: function () { 
        var d = {
            page_index: this.pageindex == undefined || isNaN(this.pageindex) ? 1 : this.pageindex,
            page_size: this.pagesize == undefined || isNaN(this.pagesize) ? 30 : this.pagesize,
            //totalcount: this.totalcount == undefined ? 0 : this.totalcount,
            total_page: this.totalcount == undefined || isNaN(this.totalcount) ? 1 : Math.ceil(this.totalcount / this.pagesize), //Math.ceil向上取整,有小数就+1
        };
        this.getIndexs(d);
        this.showpageindex = d.page_index;
        return d;
    },
    watch:{     //监听value的变化，进行相应的操作即可
        totalcount: function (a, b) {     //a是value的新值，b是旧值  
            this.total_page = a == undefined ? 1 : Math.ceil(a / this.pagesize); //Math.ceil向上取整,有小数就+1
            this.getIndexs(this); 
        },
        pageindex: function (a, b) {     //a是value的新值，b是旧值   
            this.page_index = a; //Math.ceil向上取整,有小数就+1
            this.getIndexs(this);
        },
        pagesize: function (a, b) {
            this.page_size = a; //Math.ceil向上取整,有小数就+1
            this.getIndexs(this);
        }
    },
    props: { 
        pageindex: Number,
        pagesize:Number, 
        totalcount: Number,
    },
    template: [
                '     <div class="pagebar">', 
                '            <ul class="pagination">',
                '                <li class="paginate_button" >',
                '                    <a href="#" v-on:click="jumptopage(1)" style="color:#337ab7">首页</a>',
                '                </li>',
                '                <li v-bind:class="this.page_index <= 1? \'disabled\':\'\' "  >',
                '                    <a href="#" v-on:click="previous" style="color:#337ab7">上一页</a>',
                '                </li>',
                '                <li v-for="num in indexs" :class="num!=page_index?\'paginate_button\':\'paginate_button active\'">',
                '                    <a href="#" v-on:click="jumptopage(num)" v-bind:style="{color:(num!=page_index ? \'#337ab7\' : \'\')}">{{num}}</a>',
                '                </li>',
                '                <li v-bind:class="this.page_index>=this.total_page?\'disabled\':\'\'" >',
                '                    <a href="#" v-on:click="next" style="color:#337ab7">下一页</a>',
                '                </li>',
                '                <li class="paginate_button" >',
                '                    <a href="#" v-on:click="jumptopage(total_page)" style="color:#337ab7">尾页</a>',
                '                </li>',
                '            </ul>',

                '            <ul class="pagination">', 
                '                <li >',
                '                   <a>第<input style="width:25px;height:20px;" v-on:change="jumptopage(showpageindex)" v-model:value="showpageindex">/{{total_page}}页,共{{totalcount}}条记录</a>',
                //'                   <a  v-on:click="jumptopage(page_index)" style="color:#337ab7"  >跳转</a>',
                '               </li>',
                '            </ul>',
                '    </div>'
                ].join('\r\n'),
    methods: {
        next: function () {
            //alert(this.page_index);
            if (this.page_index < this.total_page) {
                this.page_index++;
                this.changePage();
            }
        },
        previous: function () {
            if (this.page_index == 1)
            {
                return;
            }
            if (this.page_index > 1) {
                this.page_index--;
            }

            this.changePage();
        },
        changePage: function () {
            this.getIndexs(this);
            this.$emit('page-change', this.page_index);
        },
        getIndexs: function (_this) {
            //var left = 1
            //var right = _this.total_page
            //var ar = []
            //if (_this.total_page >= 10) {
            //    if (_this.page_index > 8 && _this.page_index < _this.total_page - 7) {
            //        left = Number(_this.page_index) - 4
            //        //right = Number(_this.page_index) - 1
            //        right = Number(_this.page_index) + 5
            //    } else {
            //        if (_this.page_index <= 8) {
            //            left = 1
            //            right = 10
            //        } else {
            //            right = _this.total_page
            //            left = _this.total_page - 9
            //        }
            //    }
            //}
            //while (left <= right) {ar.push(left)
            //    left++
            //}
            //_this.indexs = ar
            var ar = []; 
            // (_this.page_index - 3 > 0) { ar.push(_this.page_index - 3); }
            if (_this.page_index - 2 > 0) { ar.push(_this.page_index - 2); }
            if (_this.page_index - 1 > 0) { ar.push(_this.page_index - 1); }
            if (_this.page_index - 0 > 0) { ar.push(_this.page_index - 0); }
            if (_this.page_index + 1 <= _this.total_page) { ar.push(_this.page_index + 1); }
            if (_this.page_index + 2 <= _this.total_page) { ar.push(_this.page_index + 2); }
            if (_this.page_index + 3 <= _this.total_page) {
                if (_this.page_index + 4 <= _this.total_page)
                {
                    ar.push("...");
                } else {
                    ar.push(_this.page_index + 3);
                }
            }
            if (_this.page_index + 4 <= _this.total_page) { ar.push(_this.total_page); }

            _this.indexs = ar;
            this.showpageindex = _this.page_index;
        },
        jumptopage: function (num) {
            if (num == '...') {
                num = this.page_index + 3;
            }
            if (!(/(^[1-9]\d*$)/.test(num)) || num == '') { num = 1 }
             
            num = num * 1;//转数字
            if (this.total_page <= 0)
            {
                this.total_page = 1;
            }
            if (num > this.total_page) { num = this.total_page * 1; }
            this.page_index = num;
            this.changePage();
        }

    }
})

使用方法

<button class="btn btn-primary " type="button"  v-on:click="getData" style="margin-left:50px;"><i class="fa fa-search"></i>查询</button>
 ....
 ....
<v-pagebar v-bind:pageindex="this.pageindex" v-bind:pagesize="this.pagesize" v-bind:totalcount="this.total" v-on:page-change="this.pagechange"></v-pagebar>
 

<script type="text/javascript">
    var BTSampleInfomain = new Vue({
        el: "#SampleInfoVueIndexMainDiv",
        data: {
            CompanySeachKey:'',
            list: [], 
            SelectedSampleID: '',//当前选择的条码,变背景色用 
            pageindex: 1,
            total: 0,
            pagesize: 30,
            ascending: false,
            sortField: "ReceiveDate",

        },
        created: function () {//这里定义这个方法，vue实例之后运行到这里就调用这个函数
            var _this = this;
            setTimeout(function () { //延时是因为控件没准备好.
                $("#SampleInfoVueIndexMainDiv").find(".txtBeginDate").val(laydate.now(-1, "YYYY-MM-DD 07:00"));
                $("#SampleInfoVueIndexMainDiv").find(".txtEndDate").val(laydate.now(0, "YYYY-MM-DD 23:59"));

                _this.getData();
                _this = null;
            }, 300); 
        },
        methods: { 
            getData: function (page) {
                if (page != undefined && page != NaN) { this.pageindex = page }
                var params = {};
                params.pageindex = this.pageindex;
                params.pagesize = this.pagesize;
                params.ascending = this.ascending;
                params.sortField = this.sortField;
                var seachParam = $("#SampleInfoVueIndexMainDiv").find(".seacherform").serializeArray();
                for (var i = 0; i < seachParam.length; i++) {
                    params[seachParam[i]["name"]] = seachParam[i]["value"];
                }
                

                this.$http.post('/SampleInfo/SampleInfo/Ajax_LoadData', params).then(function (response) { 
                    if (typeof response.body == "string"){
                        MidPageLayer("出错了", response.body, "ErrorInfo", [2 * (document.documentElement.clientWidth) / 3 + 'px', document.documentElement.clientHeight + 'px']);
                    } else {
                        if (response.body.success == true)
                        { 
                            this.list = response.body.list;
                            this.total = response.body.total; 
                            this.pageindex = response.body.pageindex;
                            //this.TestAimsList = [];
                            //this.SampleTrackList = [];
                        } else {
                            alert(response.body.message);
                        }
                    }
                });
            }, 
            pagechange: function (page) { 
                this.getData(page);
            },
            sort: function (sortField) {
                this.list.sort(function (a, b) {
                    if (a[sortField] == null) {
                        a[sortField] = '';
                    }
                    if (b[sortField] == null) {
                        b[sortField] = '';
                    }
                    a = a[sortField].toString().toLowerCase();
                    b = b[sortField].toString().toLowerCase();
                    return a < b ? -1 : a > b ? 1 : 0;
                });
                this.ascending = this.sortField === sortField ? !this.ascending : false;
                if (this.ascending) this.list.reverse();
                this.sortField = sortField;
            },
            sortclass: function (sortField) {
                return this.sortField === sortField ? this.ascending === true ? 'sorting_desc' : 'sorting_asc' : 'sorting'
            }
        }
    });


</script>

如上的使用方法总是报错误, 后来改了一下v-on:click 就可以了,增加了一个中间隔离用的pagechange方法.

<button class="btn btn-primary " type="button"  v-on:click="pagechange(1)" style="margin-left:50px;"><i class="fa fa-search"></i>查询</button>

<script>
	methods: { 
		    pagechange: function (page) { 
                this.getData(page);
            },
            ....
	}
</script>

猜测问题原因,错误写法中, v-on:click=“getData” 这种不带参数的写法是不正确的.
Vue好像会自动传递一个参数MouseEvent进来, 然后里面的名字因为一致导致了自动赋值.
然后在后面的刷新界面,检测数据类型时导致了系统报错.
所以这种 v-on:click=“getData” 不带圆括号参数的写法还是要注意的. 最好带上 圆括号