vue页面中传参的方法

水深无声 2024-04-17 05:39 62阅读 0赞

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

![20190823102611262.png][]（数据）

方法一：

删除：![20190823101153323.png][]

调用：![20190823100817671.png][]

再调用：![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk4OTI5Mw_size_16_color_FFFFFF_t_70][]

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

修改提交：![20190823101127360.png][]

调用：![20190823101506900.png][]（在这里传不传值都行）

再调用：![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk4OTI5Mw_size_16_color_FFFFFF_t_70 1][]

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

源码（可只看加粗部分）

<table style="width:500px;"> 
 <tbody> 
 <tr> 
 <td> &lt;template&gt; &lt;div class="wrapper"&gt; &lt;div class="row"&gt; &lt;div class="col-sm-12"&gt; &lt;section class="panel"&gt; &lt;header class="panel-heading"&gt;用户列表&lt;/header&gt; &lt;div class="panel-body"&gt; &lt;div class="adv-table editable-table"&gt; &lt;div class="clearfix"&gt; &lt;button @click="btnAdd" class="btn btn-success" type="button"&gt;新增&lt;/button&gt; &lt;/div&gt; &nbsp; &lt;div id="editable-sample_wrapper" class="dataTables_wrapper form-inline" role="grid" style="margin-top:12px;" &gt; &lt;table class="table table-striped table-hover table-bordered dataTable" id="editable-sample" aria-describedby="editable-sample_info" &gt; &lt;thead&gt; &lt;tr role="row"&gt; &lt;th&gt;id&lt;/th&gt; &lt;th&gt;姓名&lt;/th&gt; &lt;th&gt;角色&lt;/th&gt; &nbsp; &lt;/tr&gt; &lt;/thead&gt; &nbsp; &lt;tbody role="alert" aria-live="polite" aria-relevant="all" v-if="users!=null"&gt; &lt;tr v-for="item in users" :key="item.id"&gt; &lt;td&gt;{ {item.id}}&lt;/td&gt; &lt;td&gt;{ {item.name}}&lt;/td&gt; &lt;td&gt;{ {item.role}}&lt;/td&gt; &lt;td&gt;{ {item.state}}&lt;/td&gt; &lt;td&gt;{ {item.depart}}&lt;/td&gt; &lt;td&gt; &lt;a style="color:blue;" @click="btnEdit(item)"&gt;编辑&lt;/a&gt; &amp;nbsp;&amp;nbsp; &lt;a style="color:blue;" @click="btnRemove(item.id)" &gt;删除&lt;/a&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; &lt;div class="row"&gt; &lt;div class="col-lg-6"&gt; &lt;div class="dataTables_info" id="editable-sample_info" &gt;Showing 1 to 5 of 28 entries&lt;/div&gt; &lt;/div&gt; &lt;div class="col-lg-6"&gt; &lt;div class="dataTables_paginate paging_bootstrap pagination"&gt; &lt;ul&gt; &lt;li class="prev disabled"&gt; &lt;a href="#"&gt;← Prev&lt;/a&gt; &lt;/li&gt; &lt;li class="active"&gt; &lt;a href="#"&gt;1&lt;/a&gt; &lt;/li&gt; &lt;li&gt; &lt;a href="#"&gt;2&lt;/a&gt; &lt;/li&gt; &lt;li&gt; &lt;a href="#"&gt;3&lt;/a&gt; &lt;/li&gt; &lt;li&gt; &lt;a href="#"&gt;4&lt;/a&gt; &lt;/li&gt; &lt;li&gt; &lt;a href="#"&gt;5&lt;/a&gt; &lt;/li&gt; &lt;li class="next"&gt; &lt;a href="#"&gt;Next →&lt;/a&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/section&gt; &lt;/div&gt; &lt;/div&gt; &nbsp; &lt;div id="modalAdd" class="modal fade" tabindex="-1" role="dialog"&gt; &lt;div class="modal-dialog" role="document"&gt; &lt;div class="modal-content"&gt; &lt;div class="modal-header"&gt; &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt; &lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt; &lt;/button&gt; &lt;h4 class="modal-title"&gt;新增&lt;/h4&gt; &lt;/div&gt; &lt;div class="modal-body"&gt; &lt;form class="form-horizontal" role="form" v-if="curItem!=null"&gt; &lt;div class="form-group"&gt; &lt;label class="col-lg-2 col-sm-2 control-label"&gt;id&lt;/label&gt; &lt;/div&gt; &lt;div class="form-group"&gt; &lt;label class="col-lg-2 col-sm-2 control-label"&gt;用户名&lt;/label&gt; &lt;div class="col-lg-10"&gt; &lt;input v-model="curItem.name" type="text" class="form-control" placeholder /&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="form-group"&gt; &lt;label class="col-lg-2 col-sm-2 control-label"&gt;密码&lt;/label&gt; &lt;div class="col-lg-10"&gt; &lt;input v-model="curItem.pass" type="text" class="form-control" placeholder /&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="form-group"&gt; &lt;label class="col-lg-2 col-sm-2 control-label"&gt;角色&lt;/label&gt; &lt;div class="col-lg-10"&gt; &lt;select class="form-control" v-model="curItem.role"&gt; &lt;option value="1"&gt;普通用户&lt;/option&gt; &lt;option value="2"&gt;管理员&lt;/option&gt; &lt;/select&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="form-group"&gt; &lt;label class="col-lg-2 col-sm-2 control-label"&gt;状态&lt;/label&gt; &lt;div class="col-lg-10"&gt; &lt;select class="form-control" v-model="curItem.state"&gt; &lt;option value="1"&gt;正常&lt;/option&gt; &lt;option value="2"&gt;已删除&lt;/option&gt; &lt;/select&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="form-group"&gt; &lt;label class="col-lg-2 col-sm-2 control-label"&gt;部门&lt;/label&gt; &lt;div class="col-lg-10"&gt; &lt;input v-model="curItem.depart" type="text" class="form-control" placeholder /&gt; &lt;/div&gt; &lt;/div&gt; &lt;/form&gt; &lt;/div&gt; &lt;div class="modal-footer"&gt; &lt;button type="button" class="btn btn-primary" @click="btnAddSubmit"&gt;确定&lt;/button&gt; &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;关闭&lt;/button&gt; &lt;/div&gt; &lt;/div&gt; &lt;!-- /.modal-content --&gt; &lt;/div&gt; &lt;!-- /.modal-dialog --&gt; &lt;/div&gt; &lt;!-- /.modal --&gt; &lt;div id="modalEdit" class="modal fade" tabindex="-1" role="dialog"&gt; &lt;div class="modal-dialog" role="document"&gt; &lt;div class="modal-content"&gt; &lt;div class="modal-header"&gt; &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt; &lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt; &lt;/button&gt; &lt;h4 class="modal-title"&gt;编辑&lt;/h4&gt; &lt;/div&gt; &lt;div class="modal-body"&gt; &lt;form class="form-horizontal" role="form" v-if="curItem!=null"&gt; &lt;div class="form-group"&gt; &lt;label class="col-lg-2 col-sm-2 control-label"&gt;用户名&lt;/label&gt; &lt;div class="col-lg-10"&gt; &lt;input v-model="curItem.name" type="text" class="form-control" placeholder /&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="form-group"&gt; &lt;label class="col-lg-2 col-sm-2 control-label"&gt;密码&lt;/label&gt; &lt;div class="col-lg-10"&gt; &lt;input v-model="curItem.pass" type="text" class="form-control" placeholder /&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="form-group"&gt; &lt;label class="col-lg-2 col-sm-2 control-label"&gt;角色&lt;/label&gt; &lt;div class="col-lg-10"&gt; &lt;select class="form-control" v-model="curItem.role"&gt; &lt;option value="1"&gt;普通用户&lt;/option&gt; &lt;option value="2"&gt;管理员&lt;/option&gt; &lt;/select&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="form-group"&gt; &lt;label class="col-lg-2 col-sm-2 control-label"&gt;状态&lt;/label&gt; &lt;div class="col-lg-10"&gt; &lt;select class="form-control" v-model="curItem.state"&gt; &lt;option value="1"&gt;正常&lt;/option&gt; &lt;option value="2"&gt;已删除&lt;/option&gt; &lt;/select&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="form-group"&gt; &lt;label class="col-lg-2 col-sm-2 control-label"&gt;部门&lt;/label&gt; &lt;div class="col-lg-10"&gt; &lt;input v-model="curItem.depart" type="text" class="form-control" placeholder /&gt; &lt;/div&gt; &lt;/div&gt; &lt;/form&gt; &lt;/div&gt; &lt;div class="modal-footer"&gt; &lt;button type="button" class="btn btn-primary" @click="btnEditSubmit"&gt;提交&lt;/button&gt; &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;关闭&lt;/button&gt; &lt;/div&gt; &lt;/div&gt; &lt;!-- /.modal-content --&gt; &lt;/div&gt; &lt;!-- /.modal-dialog --&gt; &lt;/div&gt; &lt;!-- /.modal --&gt; &lt;/div&gt; &lt;/template&gt; &nbsp; &lt;script&gt; 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" }, &nbsp; params: { id: id } }).then(function(res) { console.log("删除成功"); loadRemote(me); }); } &lt;/script&gt; </td> 
 </tr> 
 </tbody> 
</table>

[20190823102611262.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/11/fe047ce46ef847d383186da364a88ede.png
[20190823101153323.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/11/1fcc01e08ae54016996c2712cb37f284.png
[20190823100817671.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/11/5046002b90d54d6687558118e4991cee.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk4OTI5Mw_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/11/88fa3b615a974ce1b10b75636e18aa92.png
[20190823101127360.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/11/a300d8bac71a4e73ad451aaec44d46b1.png
[20190823101506900.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/11/0764ce663d1a4639994943bce30b4636.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk4OTI5Mw_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/11/6f6ca20018084905adf56af928d91bf3.png