爱钻研的oo 2023-04-16 16:11
浏览 17
已结题

Vue代码不生效,想要通过Vue将超链接通过表单以delete请求提交

找了好几个朋友都找不出错误,各位帅哥美女为我解惑!
关键内容: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>

  • 写回答

0条回答 默认 最新

    报告相同问题?

    问题事件

    • 已结题 (查看结题原因) 4月16日
    • 创建了问题 4月16日

    悬赏问题

    • ¥15 两台交换机分别是trunk接口和access接口为何无法通信,通信过程是如何?
    • ¥15 C语言使用vscode编码错误
    • ¥15 用KSV5转成本时,如何不生成那笔中间凭证
    • ¥20 ensp怎么配置让PC1和PC2通讯上
    • ¥50 有没有适合匹配类似图中的运动规律的图像处理算法
    • ¥15 dnat基础问题,本机发出,别人返回的包,不能命中
    • ¥15 请各位帮我看看是哪里出了问题
    • ¥15 vs2019的js智能提示
    • ¥15 关于#开发语言#的问题:FDTD建模问题图中代码没有报错,但是模型却变透明了
    • ¥15 uniapp的h5项目写一个抽奖动画