vue 在修改页调整数据会导致列表页同步变动的问题

最新推荐文章于 2024-08-06 13:51:57 发布
最新推荐文章于 2024-08-06 13:51:57 发布
阅读量870 收藏 2
点赞数 1
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/printsky/article/details/105861890
版权

 其实是引用传递导致的

原方法

  modify(row) {
          this.$refs.push.params = row
          this.$refs.push.visible = true
    }

现在方法

    modify(row) {
         //避免引用传递
          this.$refs.push.params = JSON.parse(JSON.stringify(row))
          this.$refs.push.visible = true
    }

这样就能避免引用传递了 

实际上在某些情况下引用传递会简化程序

printsky
关注
专栏目录
VUE面试题
永生天地
02-17 1437
一、vue 生命周期 先看一张图片，图片来源于官网：https://cn.vuejs.org/v2/guide/instance.html 以上钩子详细：（只解释了几个主要的） 1.beforeCreate 在页面被加载的时候首先会创建一个Vue的实例，并且初始化该实例，在实例初始化之后，此时被调用的生命周期钩子叫做：beforeCreate,这个时候数据的观测和事件还没有被调用（特就是说此时还读取不到data里面的数据和实力内的方法） 2.created 当vue实例初始化后，实例创建完成后立
Vue 原理整理
热门推荐
gxll499294075的博客
03-22 1万+
1. 组件化基础=>（MVVM模型） 传统组件，知识静态渲染，更新依赖于操作DOM。 Vue的核心理念是数据驱动的理念，所谓的数据驱动的理念：当数据发生变化的时候，用户界面也会发生相应的变化，开发者并不需要手动的去修改dom。 优点： 不需要在代码中去频繁的操作dom了，这样提高了开发的效率，同时也避免了在操作Dom的时候出现的错误。 Vue.js的数据驱动是通过MVVM这种框架来实现的，MVVM 框架主要包含三部分：Model, View, ViewMode 数据驱动视图...
vue elementUi在表单中修改数据，表格的数据也同步修改的问题
qq_37289115的博客
12-07 3690
在表单中修改数据，表格的数据也跟着修改的问题 最近遇到一个问题，在表单中修改数据，表格的数据也跟着修改，且不管是不是按确定或取消按钮，表格的数据还是被修改了，部分代码如下： preEdit: function() { if (this.selectData.length !== 1) { this.$alert('请选择一条记录', '提示', { confirmButtonText: '确定' }).then(() => { }) return } t
vue 编辑弹框，编辑页面，列表数据也会跟着变
笔记
12-25 1674
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项目中，在表单中修改数据，表格数据也会被修改
最新发布
qq_46614863的博客
08-06 325
在开始解决这个问题时，我的最初想法是在“取消”按钮的事件中添加一个加载数据的函数，每次取消并关闭窗口时重新发送请求来重新加载数据。在尝试修改表格中的数据时，即使用户在点击“取消”按钮后选择放弃修改并关闭窗口，表格中的数据仍然会显示为已修改状态。）来拷贝对象，这确实可以复制对象的属性，但这种方式还只是进行浅拷贝。它只复制对象的第一层属性，如果对象中包含多层嵌套的对象，仍然是引用地址的赋值，因此这些嵌套对象会被同步修改。这是代码中存在的问题所在。使用深拷贝后，修改的就是独立的对象，不会影响原有对象。
vue中引用导致数据与被引用数据同步修改
qq_39917399的博客
07-25 460
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 271
【代码】vue总修改的时候页面的元素跟着改变，使用Object.assign( )解决;
修改上一页面参数
qq_44360851的博客
07-08 1102
getCurrentPages() 函数用于获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面
Vue 列表上下过渡效果的实例代码
12-09
在Vue中实现列表的上下过渡效果，通常我们会利用Vue的内置组件`transition-group`来处理元素的进入和离开动画。然而，在某些特定情况下，可能需要自定义过渡效果以满足更复杂的需求。本篇文章将深入探讨如何通过手动...
vue经典面试题
weixin_47818125的博客
05-27 883
JavaScript中的对象是引用类型的数据，当多个实例引用同一个对象时，只要一个实例对这个对象进行操作，其他实例中的数据也会发生变化。而在 Vue 中，更多的是想要复用组件，那就需要每个组件都有自己的数据，这样组件之间才不会相互干扰。所以组件的数据不能写成对象的形式，而是要写成函数的形式。数据以函数返回值的形式定义，这样当每次复用组件的时候，就会返回一个新的data，也就是说每个组件都有自己的私有数据空间，它们各自维护自己的数据，不会干扰其他组件的正常运行。
vue2 vue3 js es6 html css 知识点
weixin_71783532的博客
08-03 1025
生命周期函数 又叫钩子函数 是到了某一个时间点会自动触发 我们讨论的是 vue 实例的钩子函数 从 vue 实例创建到销毁的过程中 到了一定的时间节点就会触发是 ECMAScript 的第六个版本 在 es5 的基础上新增加了一些语法 js 分成三部分 dom（文档对象模型） bom（浏览器对象模型） ECMAScript（js 语法）1.JavaScript（以下简称 js）的数据类型分为两种：原始类型（即基本数据类型）和对象类型（即引用数据类型）；...
从当前页面返回上个页面，并在当前页面修改上个页面的数据
无名之辈-_-
09-10 1191
目前的需求是这样的，在A页面发布图片内容，在A页面有一个按钮选择定位，要跳转到B页面，选择之后并返回A页面展示，A页面之前填写的信息要保留。 （1）在 原生微信小程序中实现方法： 在B页面中返回A页面的方法中写入： let pages = getCurrentPages(); let prevPage = pages[pages.length - 2]; prevPage.setData({ title:this.data.title, }) wx.navigateBack({
vue返回上一页并刷新上一页数据
肖肖肖丽珠的博客
02-07 6732
在上一页的加上。 activated() { this.getconfigList() //页面访问接口获取数据的函数 },
vue 详情页修改数据返回主页面后修改主页面该条数据且其他数据保留
hyduan_h5的博客
05-31 1350
目标需求： 1：从a页面（例如表格、表单等）某行数据跳转到b页面， 2：b页面不调用后端接口，只是前端页面的数据修改， 3：修改b页面数据后，返回a页面，此时a页面该行数据修改，且其他数据保持不变； 实现原理： 1：a页面跳转b页面，数据可由路由带过去； 2：b页面跳转a页面，b页面修改a页面的数据，通过eventBus修改； 3：b页面跳转a页面，a页面数据保留的数据，通过keep-alive方式； 相关文档： 1：eventBus：链接 2：keep-alive vue2.0: 链接 3：keep.
十一、VueJs 填坑日记之使用Amaze ui调整列表和内容页面
weixin_30770495的博客
07-13 490
上一篇博文我们整合了Amaze ui，并且调整了一个头部header和底部footer文件，其实做起来也很简单，只要按照步骤来做，完全没有问题。今天我们来重新调整一下列表页面和内容页面，使我们做的后台管理系统更有范儿。 制作左侧菜单一个后台管理系统，大致的样式都是分为南北东西的，而西（也就是左侧）一般是我们的菜单。如图： 我们今天就来把我们的项目完成到如上图的样式，首先我们来制作左侧的菜单...
vue弹窗上修改数据后页面数据跟着更改的解决方法
qq_32106541的博客
04-28 388
Object.assign方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象，它将返回目标对象。不会引用原地址，不会修改到原来的内容。如果是数组，或者里面某一项是数组，先用JSON.stringify(data)转换成字符串，再用JSON.parse(data)转换回来就不会引用源地址了。这样如果操作失误，取消或关掉编辑对话框，数据不会被修改，只有在提交的时候才会修改页面数据。修改表格里的数据，在弹窗里修改数据，未提交表格里数据就修改了，取消弹窗数据也已经修改。
vue中列表切换，改变内容
weixin_30670925的博客
04-04 945
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="app"> <butto...
vue 表单数据修改，导致页面列表数据被同步修改问题的解决。
qq_40055200的博客
01-18 3453
在vue的项目开发中，有时候在表单提交的时候，尤其是页面中对话层编辑数据，在修改的时候，会看到列表页面的数据也在跟着改变，这是vue 的双向数据绑定的弊端，实时更新数据，因为是一个数据源，因为在修改对象的时候，对象的指针直接指向页面数据 了，解决办法是： 在修改的时候，会获取到当前行的对象数据，那么我们不是直接赋值给我们的页面对象数据，而是： this.addRoleFrom =JSON.parse(JSON.stringify(row)) // 改过之后的 this.addRoleFrom =Oje
uniapp之vue3.2 微信小程序开发：路由跳转传参，页面通讯：修改上一页面的数据，监听页面回退传递的数据
前端菜鸟好先森的博客
12-21 2045
uniapp之vue3.2 微信小程序开发：路由跳转传参，页面通讯：修改上一页面的数据，监听页面回退传递的数据
Vue2.0结合vue-router构建列表页实战教程
在构建一个基于vue2.0和vue-router的简单列表页时，我们需要遵循以下步骤： 1. **环境搭建**： 使用`vue-cli`这个脚手架工具初始化项目。首先确保全局安装了`vue-cli`，如果没有，可以通过`npm install -g vue-cli...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值