项目中自己用 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” 不带圆括号参数的写法还是要注意的. 最好带上 圆括号
