找了好几个朋友都找不出错误,各位帅哥美女为我解惑!
关键内容:Vue,SpringMVC Delete方式提交。采用Vue将超链接转为的提交方式借助form表单转为 delete 提交。但是vue相关的js代码不起作用。
代码如下图:下面是一个网页,主体是一个输出员工信息的表格,可以对员工信息进行修改和删除。
出错情况:点击删除后跳转的页面是 《a》标签默认的get方式请求提交,但是在Vue代码中我已经将《a》标签的默认功能停止了,并且通过form表单来提交该 delete请求。
经过网页的检查,Vue文件获取正常200,就只是单纯的vue代码没有生效,各位xd 帮忙,搞了一个下午,累
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>employees</title>
<link rel="stylesheet" th:href="@{/static/css/css1.css}">
</head>
<body>
<h1>员工信息表</h1>
<div id="app">
<div class="table-container">
<table>
<tr>
<th>ID</th>
<th>姓氏</th>
<th>电子邮件</th>
<th>性别</th>
<th>操作(<a th:href="@{/to/add}" style="color: bisque">添加</a>)</th>
</tr>
<tr th:each="employee:${session.employees}" class="row">
<td th:text="${employee.id}"></td>
<td th:text="${employee.lastName}"></td>
<td th:text="${employee.email}"></td>
<td th:text="${employee.gender}"></td>
<td><a th:href="@{'/employee/'+${employee.id}}">修改</a>
|
<a @click="deleteEmployee()" th:href="@{'/employee/'+${employee.id}}">删除</a></td>
</tr>
</table>
<form method="post">
<input type="hidden" name="_method" value="Delete">
<input type="submit" value="提交">
</form>
</div>
</div>
<script type="text/javascript" th:src="@{/static/js/vue.js}"></script>
<script type="text/javascript">
var vue = new Vue({
methods:{
el:"#app",
deleteEmployee(){
//获取form表单
var form = document.getElementsByTagName("form")[0];
//将超链接的href属性值赋值给表单的action属性
form.action = event.target.href;
//将表单提交
form.submit();
//阻止超链接的默认行为
event.preventDefault();
}
}
});
</script>
</body>
</html>