Vue使用遇到的Invalid handler for event "select": got undefined问题
在网上搜了一大圈都没找到解决方法，大家都说方法写在methods里或者methods误写成method了，但是我后面直接将视频源代码拷过来，依然报错啊，错误信息如下：
其中最下面那个红色是安装的广告插件，可以忽略。
源代码如下：
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>学生管理系统</title>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<script src="js/axios-0.18.0.js"></script>
</head>
<body>
<div id="div">
<b style="color: red; font-size: 20px;">学生列表</b>
<div style="float: right;">
<el-button type="primary" @click="showAddStu">添加学生</el-button>
</div>
<el-table :data="tableData">
<el-table-column prop="number" label="学号" width="120">
</el-table-column>
<el-table-column prop="name" label="姓名" width="120">
</el-table-column>
<el-table-column prop="birthday" label="生日" width="140">
</el-table-column>
<el-table-column prop="address" label="地址">
</el-table-column>
<el-table-column label="操作" width="180">
<template slot-scope="props">
<el-button type="warning" @click="showEditStu(props.row)">编辑</el-button>
<el-button type="danger" @click="deleteStu(props.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<!--
分页组件
@size-change： 当改变每页条数时触发的函数
@current-change：当改变页码时触发的函数
current-page ：默认的页码
:page-sizes：每页条数选择框中显示的值
:page-size : 默认的每页条数
layout： 分页组件的布局
total（总条数）, sizes(每页条数), prev（上一页）, pager(所有的页码), next(下一页), jumper（跳转页码）
:total: 总条数
-->
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="pagination.currentPage"
:page-sizes="[3,5,8]"
:page-size="pagination.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="pagination.total">
</el-pagination>
<el-dialog title="添加学生信息" :visible.sync="dialogTableVisible4add" @close="resetForm('addForm')">
<!--
:model="formData": 关联数据
:rules: 关联校验规则
ref： 在获取表单对象时使用
-->
<el-form :model="formData" :rules="rules" ref="addForm" label-width="100px" class="demo-ruleForm">
<el-form-item label="学生学号" prop="number">
<el-input v-model="formData.number"></el-input>
</el-form-item>
<el-form-item label="学生姓名" prop="name">
<el-input v-model="formData.name"></el-input>
</el-form-item>
<el-form-item label="学生生日" prop="birthday">
<!--v-model : 双向绑定 -->
<el-input v-model="formData.birthday" type="date"></el-input>
</el-form-item>
<el-form-item label="学生地址" prop="address">
<el-input v-model="formData.address"></el-input>
</el-form-item>
<el-form-item align="right">
<el-button type="primary" @click="addStu()">添加</el-button>
<el-button @click="resetForm('addForm')">重置</el-button>
</el-form-item>
</el-form>
</el-dialog>
<el-dialog title="编辑学生信息" :visible.sync="dialogTableVisible4edit" @close="resetForm('editForm')" >
<!--
:model="formData": 关联数据
:rules: 关联校验规则
ref： 在获取表单对象时使用
-->
<el-form :model="editFormData" :rules="rules" ref="editForm" label-width="100px" class="demo-ruleForm">
<el-form-item label="学生学号" prop="number">
<el-input v-model="editFormData.number"></el-input>
</el-form-item>
<el-form-item label="学生姓名" prop="name">
<el-input v-model="editFormData.name"></el-input>
</el-form-item>
<el-form-item label="学生生日" prop="birthday">
<!--v-model : 双向绑定 -->
<el-input v-model="editFormData.birthday" type="date"></el-input>
</el-form-item>
<el-form-item label="学生地址" prop="address">
<el-input v-model="editFormData.address"></el-input>
</el-form-item>
<el-form-item align="right">
<el-button type="warning" @click="updateStu()">修改</el-button>
</el-form-item>
</el-form>
</el-dialog>
</div>
</body>
<script>
let vm = new Vue({
el:"#div",
data:{
dialogTableVisible4add: false, //添加窗口显示状态
dialogTableVisible4edit: false, //编辑窗口显示状态
formData:{},//添加表单的数据
editFormData: {},//编辑表单的数据
tableData:[],//表格数据
pagination: {
currentPage: 1, //当前页
pageSize: 5, //每页显示条数
total: 0 //总条数
},
rules: {
number: [
{required: true, message: '请输入学号', trigger: 'blur'},
{min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur'}
],
name: [
{required: true, message: '请输入姓名', trigger: 'blur'},
{min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur'}
],
birthday: [
{required: true, message: '请选择日期', trigger: 'change'}
],
address: [
{required: true, message: '请输入地址', trigger: 'blur'},
{min: 2, max: 200, message: '长度在 2 到 200 个字符', trigger: 'blur'}
],
}
},
methods:{
//分页查询功能
selectByPage(){
axios.post("studentServlet","method=selectByPage¤tPage=" + this.pagination.currentPage + "&pageSize=" + this.pagination.pageSize)
.then(resp => {
//将查询出的数据赋值tableData
this.tableData = resp.data.list;
//设置分页参数
//当前页
this.pagination.currentPage = resp.data.pageNum;
//总条数
this.pagination.total = resp.data.total;
})
},
//改变每页条数时执行的函数
handleSizeChange(pageSize) {
//修改分页查询的参数
this.pagination.pageSize = pageSize;
//重新执行查询
this.selectByPage();
},
//改变页码时执行的函数
handleCurrentChange(pageNum) {
//修改分页查询的参数
this.pagination.currentPage = pageNum;
//重新执行查询
this.selectByPage();
},
showAddStu() {
//弹出窗口
this.dialogTableVisible4add = true;
},
//添加学生功能
addStu(){
let param = "method=addStu&number=" + this.formData.number + "&name=" + this.formData.name +
"&birthday=" + this.formData.birthday + "&address=" + this.formData.address +
"¤tPage=" + this.pagination.currentPage + "&pageSize=" + this.pagination.pageSize;
axios.post("studentServlet",param)
.then(resp => {
//将查询出的数据赋值tableData
this.tableData = resp.data.list;
//设置分页参数
//当前页
this.pagination.currentPage = resp.data.pageNum;
//总条数
this.pagination.total = resp.data.total;
})
//关闭添加窗口
this.dialogTableVisible4add = false;
},
resetForm(addForm) {
//双向绑定，输入的数据都赋值给了formData， 清空formData数据
this.formData = {};
//清除表单的校验数据
this.$refs[addForm].resetFields();
},
showEditStu(row) {
//1. 弹出窗口
this.dialogTableVisible4edit = true;
//2. 显示表单数据
this.editFormData = {
number:row.number,
name:row.name,
birthday:row.birthday,
address:row.address,
}
},
//修改数据功能
updateStu() {
let param = "method=updateStu&number=" + this.editFormData.number + "&name=" + this.editFormData.name +
"&birthday=" + this.editFormData.birthday + "&address=" + this.editFormData.address +
"¤tPage=" + this.pagination.currentPage + "&pageSize=" + this.pagination.pageSize;
axios.post("studentServlet",param)
.then(resp => {
//将查询出的数据赋值tableData
this.tableData = resp.data.list;
//设置分页参数
//当前页
this.pagination.currentPage = resp.data.pageNum;
//总条数
this.pagination.total = resp.data.total;
})
//关闭编辑窗口
this.dialogTableVisible4edit = false;
},
//删除数据功能
deleteStu(row) {
if(confirm("确定要删除" + row.number + "数据?")) {
let param = "method=deleteStu&number=" + row.number +
"¤tPage=" + this.pagination.currentPage + "&pageSize=" + this.pagination.pageSize;
axios.post("studentServlet",param)
.then(resp => {
//将查询出的数据赋值tableData
this.tableData = resp.data.list;
//设置分页参数
//当前页
this.pagination.currentPage = resp.data.pageNum;
//总条数
this.pagination.total = resp.data.total;
})
}
}
},
mounted () {
//调用分页查询功能
this.selectByPage();
}
});
</script>
</html>
我现在是进入网页会调用mounted ()，然后就会出错，预期输出的从后台查询信息就没有……求解……
回答：
错误不在你这些代码中，你看上面说了 el-menu 呀
以上是 Vue使用遇到的Invalid handler for event "select": got undefined问题 的全部内容， 来源链接： utcz.com/p/937466.html
