Vue在Table表单中如何获取Id

问题描述

Vue在Table表单中准备做删除功能,发现获取不到id,


解决方案:

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>

    <script src="../js/vue.js">script>
    <script src="../js/axios-0.18.0.js">script>
head>
<body>
<div id="app">
<a href="../addBrand.html"><input type="button" value="新增">a><br>
<hr>

<table id="brandTable" border="1" cellspacing="0" width="100%">
    <tr>
        <th>idth>
        <th>序号th>
        <th>品牌名称th>
        <th>企业名称th>
        <th>排序th>
        <th>品牌介绍th>
        <th>状态th>
        <th>操作th>
    tr>
    <tr v-for="(brand,i) in brands" align="center">
        <td >{{brand.id}}td>
        <td>{{i + 1}}td>
        <td>{{brand.brandName}}td>
        <td>{{brand.companyName}}td>
        <td>{{brand.ordered}}td>
        <td>{{brand.description}}td>
        <td v-if="brand.status == 1 ">启用td>
        <td v-else-if="brand.status == 0 ">禁用td>
        <td v-else >td>
        <td><a href="#">修改a> <input type="button" value="删除"  v-on:click="DeleteBrand(brand.id)">td>
    tr>
table>
div>

<script>
    new Vue({
        el:"#app",
        data(){
            return{
                brands:[],

            }
        },
        methods:{
            DeleteBrand(idt){
                axios({
                    method:"post",
                    url:"http://localhost:8081/deleteBrandServlet",
                    data:{
                        id:idt
                    }
                }).then(function (resp){
                    location.href = "http://localhost:8081/Vue/BrandList.html";
                })
            }
        },
        mounted(){
            var _this =this;
            axios({
                method:"get",
                url:"http://localhost:8081/selectBrandListServlet",
            }).then(function (resp){
                _this.brands = resp.data;
            })

        }

    })

script>
body>
html>

主要通过

v-on:click="DeleteBrand(brand.id)"

并且使用axios post传参的话 传递的是一个JSON数据
所以后台接受参数的话需要

@WebServlet("/deleteBrandServlet")
public class DeleteBrandServlet extends HttpServlet {
    BrandService service =new BrandService();
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        System.out.println("进入了DeleteServlet");
        BufferedReader br =request.getReader();

        String prams = br.readLine();
        Brand brand = JSON.parseObject(prams, Brand.class);
        System.out.println(brand);
        int id =brand.getId();
        System.out.println(id);
        service.deleteBrand(id);

    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doGet(request, response);
    }
}

你可能感兴趣的:(Java,vue.js,javascript,前端)