使用vue+elementui，当点击编辑时并没有点击提交，关闭编辑弹窗后，页面信息也随着改变但是后台数据没发生改变

最新推荐文章于 2024-05-20 17:02:17 发布

吃小孩的阿喵

最新推荐文章于 2024-05-20 17:02:17 发布

阅读量711

点赞数 2

文章标签： vue.js elementui 前端

本文链接：https://blog.csdn.net/weixin_45749079/article/details/127805075

版权

在做项目测试页面的时候发现其中有一个页面的编辑功能出现问题：点击编辑，修改数据后不保存数据，点击取消，但是数据仍然会显示到前端页面但是不会保存到数据库。这个问题困扰了我好久，在各种百度找视频之后，最终解决。

<el-button type="text" style="font-size: 15px;" @click.native="modify(scope.row)">编辑</el-button>

点击编辑按钮时会调用弹框，还有一个单击事件函数modify(scope,row),点进去看这个函数的具体方法

modify(obj){
     this.showModify=true
     this.newForm=obj;
},

当我们在页面点击编辑后，由于v-model是数据双向绑定，当数据发生改变时页面数据发生变化，这时需要修改编辑函数：如下

modify(obj){
     this.showModify=true
     this.newForm=JSON.parse(JSON.stringify(obj));
},

这个问题让我学到了JSON.parse()函数，这个函数的主要意思是：服务端接收的是数组的JSON数据，则JSON.parse()会将其转换为JavaScript数组，但是必须要注意的是这个方法只有在后台数据为json数据时才会生效，其他数据类型不生效。

关注