vue页面中传参的方法

分析，以删除（调用方法removeById）和修改提交（调用方法updateById）为例：

（数据）

方法一：

    删除： 

       调用：

             再调用：

方法二：(在特定的情况下使用，我还没研究出来咋回事)

修改提交：

      调用：（在这里传不传值都行）

            再调用：

说明：如果在@click中传递了参数，在方法中调用时就不能用me.curItem.id来调用id了。

 

 

 

源码（可只看加粗部分）

<template> <div class="wrapper"> <div class="row"> <div class="col-sm-12"> <section class="panel"> <header class="panel-heading">用户列表</header> <div class="panel-body"> <div class="adv-table editable-table"> <div class="clearfix"> <button @click="btnAdd" class="btn btn-success" type="button">新增</button> </div>   <div id="editable-sample_wrapper" class="dataTables_wrapper form-inline" role="grid" style="margin-top:12px;" > <table class="table table-striped table-hover table-bordered dataTable" id="editable-sample" aria-describedby="editable-sample_info" > <thead> <tr role="row"> <th>id</th> <th>姓名</th> <th>角色</th>   </tr> </thead>   <tbody role="alert" aria-live="polite" aria-relevant="all" v-if="users!=null"> <tr v-for="item in users" :key="item.id"> <td>{{item.id}}</td> <td>{{item.name}}</td> <td>{{item.role}}</td> <td>{{item.state}}</td> <td>{{item.depart}}</td> <td> <a style="color:blue;" @click="btnEdit(item)">编辑</a> &nbsp;&nbsp; <a style="color:blue;" @click="btnRemove(item.id)" >删除</a> </td> </tr> </tbody> </table> <div class="row"> <div class="col-lg-6"> <div class="dataTables_info" id="editable-sample_info" >Showing 1 to 5 of 28 entries</div> </div> <div class="col-lg-6"> <div class="dataTables_paginate paging_bootstrap pagination"> <ul> <li class="prev disabled"> <a href="#">← Prev</a> </li> <li class="active"> <a href="#">1</a> </li> <li> <a href="#">2</a> </li> <li> <a href="#">3</a> </li> <li> <a href="#">4</a> </li> <li> <a href="#">5</a> </li> <li class="next"> <a href="#">Next →</a> </li> </ul> </div> </div> </div> </div> </div> </div> </section> </div> </div>   <div id="modalAdd" class="modal fade" tabindex="-1" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> <h4 class="modal-title">新增</h4> </div> <div class="modal-body"> <form class="form-horizontal" role="form" v-if="curItem!=null"> <div class="form-group"> <label class="col-lg-2 col-sm-2 control-label">id</label> </div> <div class="form-group"> <label class="col-lg-2 col-sm-2 control-label">用户名</label> <div class="col-lg-10"> <input v-model="curItem.name" type="text" class="form-control" placeholder /> </div> </div> <div class="form-group"> <label class="col-lg-2 col-sm-2 control-label">密码</label> <div class="col-lg-10"> <input v-model="curItem.pass" type="text" class="form-control" placeholder /> </div> </div> <div class="form-group"> <label class="col-lg-2 col-sm-2 control-label">角色</label> <div class="col-lg-10"> <select class="form-control" v-model="curItem.role"> <option value="1">普通用户</option> <option value="2">管理员</option> </select> </div> </div> <div class="form-group"> <label class="col-lg-2 col-sm-2 control-label">状态</label> <div class="col-lg-10"> <select class="form-control" v-model="curItem.state"> <option value="1">正常</option> <option value="2">已删除</option> </select> </div> </div> <div class="form-group"> <label class="col-lg-2 col-sm-2 control-label">部门</label> <div class="col-lg-10"> <input v-model="curItem.depart" type="text" class="form-control" placeholder /> </div> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-primary" @click="btnAddSubmit">确定</button> <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button> </div> </div> <!-- /.modal-content --> </div> <!-- /.modal-dialog --> </div> <!-- /.modal --> <div id="modalEdit" class="modal fade" tabindex="-1" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> <h4 class="modal-title">编辑</h4> </div> <div class="modal-body"> <form class="form-horizontal" role="form" v-if="curItem!=null"> <div class="form-group"> <label class="col-lg-2 col-sm-2 control-label">用户名</label> <div class="col-lg-10"> <input v-model="curItem.name" type="text" class="form-control" placeholder /> </div> </div> <div class="form-group"> <label class="col-lg-2 col-sm-2 control-label">密码</label> <div class="col-lg-10"> <input v-model="curItem.pass" type="text" class="form-control" placeholder /> </div> </div> <div class="form-group"> <label class="col-lg-2 col-sm-2 control-label">角色</label> <div class="col-lg-10"> <select class="form-control" v-model="curItem.role"> <option value="1">普通用户</option> <option value="2">管理员</option> </select> </div> </div> <div class="form-group"> <label class="col-lg-2 col-sm-2 control-label">状态</label> <div class="col-lg-10"> <select class="form-control" v-model="curItem.state"> <option value="1">正常</option> <option value="2">已删除</option> </select> </div> </div> <div class="form-group"> <label class="col-lg-2 col-sm-2 control-label">部门</label> <div class="col-lg-10"> <input v-model="curItem.depart" type="text" class="form-control" placeholder /> </div> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-primary" @click="btnEditSubmit">提交</button> <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button> </div> </div> <!-- /.modal-content --> </div> <!-- /.modal-dialog --> </div> <!-- /.modal --> </div> </template>   <script> export default { name: "userManage", data() { return { users: null, curItem: null }; }, mounted: function() { console.log("userManage init.."); loadRemote(this); }, methods: { //新增显示 btnAdd: function() { btnAddAction(this); }, //新增提交 btnAddSubmit: function() { btnAddSubmitAction(this); }, //修改 btnEdit: function(item) { btnEditAction(this,item); }, //修改提交 btnEditSubmit: function(id) { btnEditSubmitAction(this, id); }, //删除 btnRemove: function(id) { btnRemoveAction(this,id); } } }; //新增提交 function btnAddSubmitAction(me) { // 加载树 me.axios({ method: "post", url: "http://。。/user/save", headers: { "X-Requested-With": "XMLHttpRequest" }, data: me.curItem }).then(function(res) { console.log(res); loadRemote(me); //调用初始化加载方法 $("#modalAdd").modal("hide"); //不显示弹窗 }); } //新增显示 function btnAddAction(me) { me.curItem = { id: "", name: "", pass: "", role: "1", state: "1", deaprt: "" }; $("#modalAdd").modal("show"); //显示弹窗 } //初始化 function loadRemote(me) { // 加载树(全部) me.axios({ method: "post", url: "http://。。/iteam/api/user/list", headers: { "X-Requested-With": "XMLHttpRequest" }, data: null }).then(function(res) { console.log(res); me.users = res.data; }); } //修改弹窗 function btnEditAction(me,item){ $("#modalEdit").modal("show"); //显示弹窗 me.curItem = item; } //修改提交 function btnEditSubmitAction(me) { me.axios({ method: "post", url: "http://。。/user/updateById", headers: { "X-Requested-With": "XMLHttpRequest" }, data: me.curItem, params: { id: me.curItem.id } }).then(function(res) { console.log("提交成功"); loadRemote(me); $("#modalEdit").modal("hide"); //不显示弹窗 }); } //删除 function btnRemoveAction(me,id){ me.axios({ method: "post", url: "http://。。/user/removeById", headers: { "X-Requested-With": "XMLHttpRequest" },   params: { id: id } }).then(function(res) { console.log("删除成功"); loadRemote(me); }); } </script>