vue 表单数据修改了页面数据也会跟着改

最新推荐文章于 2023-04-12 16:51:54 发布
最新推荐文章于 2023-04-12 16:51:54 发布
阅读量985 收藏 3
点赞数 6
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43427657/article/details/118196153
版权 
// 原先写法：
     this.editForm = row
// 修改后的写法
    this.editForm = JSON.parse(JSON.stringify(row))
qq_43427657
关注
  • 6
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
Vue制作表单按钮编辑页
前端博客典中典
12-08 380
vueFormSetting.html: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link href="../../build/common/base.css?v=1116" rel="stylesheet"> <script type="text/javascript" src="../../buil.
vue form 修改功能未提交，但会同步改变table显示的问题
l_tsov的博客
01-13 554
解决方法—— // this.editForm = this.list.datas[index] 原来的写法 this.editForm =JSON.parse(JSON.stringify(this.list.datas[index]))
vue中引用导致数据与被引用数据同步修改
qq_39917399的博客
07-25 445
this.form = this.tableData[itemNum]; 如果在vue中这样用引用的方式给一个值赋值。那么在修改this.form的同时，被引用的值也会同时改变。 解决方案 this.form = Object.assign({},this.tableData[itemNum]); 使用浅拷贝的方式进行赋值 this.editDialogData = $.extend(true...
vue中修改的时候页面的元素跟着改变，使用Object.assign( )解决；
weixin_51526447的博客
04-12 235
【代码】vue总修改的时候页面的元素跟着改变，使用Object.assign( )解决;
vue 编辑弹框，编辑页面，列表数据也会跟着变
笔记
12-25 1632
vue 编辑弹框，编辑页面，列表数据也会跟着变 editPoster(row) { // this.form = JSON.parse(JSON.stringify(row)) //避免引用传递，做一次数据拷贝 this.form = row this.dialogTitle = '编辑海报' this.dialogType = 'edit' this.dialogFormVisible = true } this.form = JSON.parse(JSON.strin
vue-v-model 双向绑定-编辑弹框修改数据后页面数据跟着更改（取消弹框操作也已经被修改数据），利用 Object.assign解决对象引用同址问题
qq_42753983的博客
12-15 1948
在做项目中经常会遇到table表格某行进行编辑。 当编辑表格行时弹出一个浮框，里面被赋值当前表格的各个元素。可以在此元素的基础上进行修改编辑操作。 一般浮框的输入项是用双向绑定v-model。 当点击编辑按钮时候把当前行的数据赋值给弹框内并渲染弹框数据。 这时候问题就容易出现了：浮框数据改变发现页面数据也跟着改变了。 如果只有确认按钮还能忍受，关键是数据已经改变，如果有取消编辑按钮，数据一样已经改变! 其实原因很简单，数据是obj类型，赋值操作的时候把地址给共同绑定了。 这也是一个js的基础问
Vue刷新修改页面中数据的方法
10-18
然而，当我们在Vue实例创建后，直接修改实例中`data`对象的属性值，页面并不会自动更新，这是由于Vue的响应式系统依赖于属性的声明和初始化。因此，如果想要在运行时改变数据并确保视图随之更新，我们需要使用`Vue....
vue中如何让子组件修改父组件数据
08-27
主要介绍了vue中子组件修改父组件数据的相关资料，文中介绍了vue中watch的认识，关于子组件修改父组件属性认识，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
vue动态加载SVG文件并修改节点数据的操作代码
10-14
在本文中，我们将探讨如何在Vue项目中动态加载SVG文件并修改其内部的节点数据。SVG（Scalable Vector Graphics）是一种基于XML的矢量图像格式，它允许我们创建可缩放的图形，这对需要交互性和动态变化的场景尤其有用...
vue 解决computed修改data数据的问题
12-13
最近在做项目的时候遇见一个问题，computed修改data数据的时候会报错。报错的大概意思是，不可以修改data数据的属性值。查了一些答案，最终解决办法是需要用到set和get。看代码： data () { return { fold: false...
Vue表单数据修改与删除
makerjack001的博客
03-03 6137
前后端分离Vue页面的数据修改与删除
解决vue登录信息不及时更新问题
穆雄雄的博客
05-20 591
大家好，我是雄雄，欢迎关注微信公众号：雄雄的小课堂 前言 现在是：2022年5月20日09:59:34 前面写过一篇文章，基于bladex框架实现的模拟登录，后来在测试的过程中发现了个问题，即A系统在跳转到本系统时，携带用户名和密码进行登录本系统是没有问题的；但是当A系统切换了别的用户，再跳转到本系统时，则本系统的用户信息还是上一个用户的信息，没有及时更新过来，本篇文章就是对这一问题的解决。 思路 出现这个问题的原因： 没有清空登录信息 没有重新登录 所以基于这两点出发，原来想的是在登录之前，先调..
vue 表单数据修改，导致页面列表数据被同步修改问题的解决。
qq_40055200的博客
01-18 3352
在vue的项目开发中，有时候在表单提交的时候，尤其是页面中对话层编辑数据，在修改的时候，会看到列表页面的数据也在跟着改变，这是vue 的双向数据绑定的弊端，实时更新数据，因为是一个数据源，因为在修改对象的时候，对象的指针直接指向页面数据 了，解决办法是： 在修改的时候，会获取到当前行的对象数据，那么我们不是直接赋值给我们的页面对象数据，而是： this.addRoleFrom =JSON.parse(JSON.stringify(row)) // 改过之后的 this.addRoleFrom =Oje
v-model双向绑定-解决编辑弹框修改数据后页面数据跟着改变的问题
weixin_46753476的博客
07-07 1230
在vue的项目中，经常会遇到表格弹框的使用，点击编辑按钮时候把当前行的数据赋值给弹框内并渲染弹框数据。使用v-model弹框数据改变发现页面数据也跟着改变了，而在实际工作当中，当点击弹框的保存按钮，表格数据才要更新...
vue项目 编辑器保存代码后自动更新浏览器页面内容
zhougushen的博客
10-17 9664
第一步，在vue项目中找到vue.config.js文件,注意:(2019年10月后创建的新vue项目，之前的是webpage.config.js文件) module.exports = { devServer: { open: true, port: 8812, }, lintOnSave: false } lintOnSave:false是解决eslint过多空格报错问题。 devServer：{ open:true//启动vue..
【vue element】使用resetFields清空表单，打开表单会出现上一次的值的原因
baidu_28647571的博客
09-15 6147
resetFields作用实际上是将表单元素置为初始值。 使用resetFields清空表单，有时候会出现再次打开表单，还是会出现上一次的值的情况，下面就要分析下这个问题的原因： demo <template> <div> <el-table :data="data"> <el-table-column prop="name" label="用户名"></el-table-column> <el-table
Vue解决双向绑定引起数据同步变化的问题
qq_41954585的博客
07-22 802
Vue解决双向绑定引起数据同步变化的问题
vue表单对话框的新建或修改
Nie2014的博客
07-23 2752
主要使用element-ui中的el-dialog控件，使用场景如下： 表单对话框的标题 根据当前的添加、修改操作展示不同对话框标题。 operation_type: "", textMap: {create: "添加设备", edit: "修改设备",}, 添加 <el-button type="text" icon="el-icon-circle-plus-outline" @click="handleAddDev"> 添加 </el-button>
vue3表单修改多条数据
最新发布
07-11
在Vue 3中，可以通过表单来修改多条数据。下面是一个示例，展示如何使用表单同时修改多条数据： 首先，在Vue组件中定义一个数据对象，用来保存多条数据： ```vue <template> <form @submit="handleSubmit"> <div v-for="item in items" :key="item.id"> <input v-model="item.name" type="text" /> <input v-model="item.age" type="number" /> </div> <button type="submit">保存</button> </form> </template> <script> import { ref } from 'vue'; export default { data() { return { items: [ { id: 1, name: 'John', age: 25 }, { id: 2, name: 'Jane', age: 30 }, // ... ], }; }, methods: { handleSubmit() { // 处理表单提交逻辑 // 可以在这里将修改后的数据发送给后端进行保存 console.log(this.items); }, }, }; </script> ``` 在上述代码中，我们通过`v-for`指令遍历`items`数组中的数据，并使用`v-model`指令绑定输入框的值。这样，当用户输入内容时，`items`中对应数据的值会自动更新。 然后，在表单的提交事件处理函数`handleSubmit`中，可以获取到修改后的数据。你可以在该函数中进行进一步的处理，例如将修改后的数据发送给后端进行保存。 请注意，上述代码中的示例是使用Vue 3的Composition API（`ref`函数）来定义数据对象。如果你使用的是Options API，可以将`items`定义为普通的数据属性。 这是一个简单的示例，你可以根据实际业务需求进行修改和扩展，例如添加校验、数据同步等逻辑。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值