解决 vue 使用 Object.assign({}, row) 二级属性怎么深拷贝的问题

缪沐

已于 2022-10-27 11:30:18 修改

阅读量371

点赞数 1

分类专栏： vue 文章标签： vue.js 前端 javascript

于 2022-10-27 11:28:49 首次发布

本文链接：https://blog.csdn.net/qq_42488879/article/details/127548967

版权

vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Object.assign(obj1, obj2)
只有一级属性为深拷贝，二级属性后就是浅拷贝

解决办法:
let newobj = JSON.parse(JSON.stringify(obj));
之后对newobj 做操作就不会影响原有对象了

查看资料:vue的深拷贝实现方式

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

缪沐

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
解决 vue 使用 Object.assign({}, row) 二级属性怎么深拷贝的问题

vue Object.assign() 方法二级属性浅拷贝问题
复制链接

扫一扫

专栏目录

ES6中新增的Object.assign()方法详解

08-29

`Object.assign()`是ES6中引入的一个非常实用的方法，它主要用于对象的合并，将源对象（`source`）的所有可枚举属性复制到目标对象（`target`）。这个方法极大地简化了JavaScript中对象属性的复制操作，使得我们可以...

vue用Object.defineProperty手写一个简单的双向绑定的示例

08-27

Vue 使用 Object.defineProperty 实现简单的双向绑定 Vue 中的双向绑定是指视图层（View）和模型层（Model）之间的同步更新。使用 Object.defineProperty 可以手写一个简单的双向绑定示例。什么是双向绑定？ ...

2 条评论您还未登录，请先登录后发表或查看评论

Object.assign({},row) 浅拷贝，编辑时还未点击确定表格的内容就更新了

xiakexinLO的博客

05-16

604

编辑时还未点击确定表格的内容就更新了（防止热更新），还可以用来合并对象等

二、Vue实例对象及其属性

Lvruoyu的博客

04-21

6527

01. Vue实例 Vue实例通过new关键字实例化Vue({})构造函数 <script> new Vue({ el: "#app", data: { msg: "Hello World" } }) </script> Vue实例配置对象选项说明 data Vue实例数据对象 methods 定义Vue实例中的

vue2.0组件

qq_44039897的博客

03-27

708

1、vue组件 .vue组件中的data不能指向对象，是一个函数 vue组件包含：template、script、style script中必须是export default{} template只能有一个根节点，所以要先创建一个div，其他的标签都在这个div中 style中css一个样式包含另一个样式需要实现声明lang="less" style默认是css语法 <template> <div> <d...

编辑时使用Object.assign({},row) el-form表单无法编辑 el-select赋值后不能编辑

新前端小白的博客

08-13

9300

场景：页面表格数据是从后台获取的，编辑时，将数据传给dialog，发现Form表单无法编辑了，select多选框无法选择，删除，datepicker等组件也会出现这种不能编辑的情况原因：通过Object.assign直接将后台返回的数据赋值给form，后台返回的数据结构与data中初始化的form，数据结构发生了改变解决：页面有新增，编辑，删除按钮。可以编辑表格中的某行数据，点击编辑打开d...

使用Object.assign()解决在Vue中使用Element- UI对用户信息编辑修改时不期望的同步修改问题

sun_kingngfyncfh的博客

07-04

328

在对话框修改用户信息时，在点击“确定”之前，外面的界面展示会一起同时修改，这是不被允许的。当我们站在用户使用的角度去思考这个问题，发现这其实也算是一个BUG。可以使用Object.assign()解决。同时利用close-on-click-modal这一属性，防止用户误触导致数据丢失。提升用户交互体验，把难题留给自己，把便捷给予他人，是我们开发中应该追求的目标。

vue使用 Object.assign()巧妙重置data数据

夏天的博客

06-10

5849

vue 使用 Object.assign() 巧妙重置data数据

vue源码学习之Object.defineProperty对象属性监听

01-21

本文介绍了vue源码学习之Object.defineProperty对象属性监听，分享给大家，具体如下：参考版本 vue源码版本：0.11 相关 vue实现双向数据绑定的关键是 Object.defineProperty ，让我们先来看下这个函数。在MDN上...

解决Vue2.0 watch对象属性变化监听不到的问题

10-18

尽管`this.$set`方法在处理单个属性时也很有效，但当需要处理多个属性变化时，可能会导致代码中出现多行`$set()`调用，相比之下，使用`Object.assign`一次性更新多个属性会更加简洁明了。以上就是本文详细分析和...

Object.assign和JSON.parse(JSON.stringify())的区别

weixin_38687522的博客

11-02

1231

浅拷贝: Object.assign() 深拷贝: JSON.parse(JSON.stringify()) 什么是浅拷贝？对于字符串类型，浅复制是对值的复制，对于对象来说，浅复制是对对象地址的复制，并没有开辟新的栈，也就是复制的结果是两个对象指向同一个地址，修改其中一个对象的属性，则另一个对象的属性也会改变。什么是深拷贝？ 深拷贝是开辟新的栈，两个对象对应两个不同的地址，修改一个对象的属性，不会改变另一个对象的属性。若对象是基础数据类型。此时 Object.assign()可实现深拷贝，和JSON.

ES6对象的新增方法——object.assign（）

weixin_46501763的博客

12-12

370

ES6对象的新增方法——object.assign（）

vue 对象的赋值Object.assign({}, row)

weixin_43844071的博客

08-25

3853

复制功能，想单独去掉id不传过去，思路设置局部变量，把整个row对象赋值给newData变量，使用 Object.assign({}, row)；使用delete方法删除newData中的id copyStep(index,row){ // 将对象赋值给一个变量 let newData = Object.assign({}, row) delete newData.id 将处理完的变量传给下面的两个方法 this.addStep

vue-v-model 双向绑定-编辑弹框修改数据后页面数据跟着更改（取消弹框操作也已经被修改数据），利用 Object.assign解决对象引用同址问题

qq_42753983的博客

12-15

1985

在做项目中经常会遇到table表格某行进行编辑。当编辑表格行时弹出一个浮框，里面被赋值当前表格的各个元素。可以在此元素的基础上进行修改编辑操作。一般浮框的输入项是用双向绑定v-model。当点击编辑按钮时候把当前行的数据赋值给弹框内并渲染弹框数据。这时候问题就容易出现了：浮框数据改变发现页面数据也跟着改变了。如果只有确认按钮还能忍受，关键是数据已经改变，如果有取消编辑按钮，数据一样已经改变! 其实原因很简单，数据是obj类型，赋值操作的时候把地址给共同绑定了。这也是一个js的基础问

【ES6】Object.assign方法与深浅拷贝

青山野火

02-26

2904

文章目录一、Object.assign二、用法详解1.Object.assign浅拷贝2. 实现深拷贝3. 自定义函数实现深拷贝总结一、Object.assign Object.assign 方法用于对象的合并，将源对象（source）的所有可枚举属性，复制到目标对象（target）。 Object.assign 方法的第一个参数是目标对象，后面的参数都是源对象。注意，如果目标对象与源对象有同名属性，或多个源对象有同名属性，则后面的属性会覆盖前面的属性。 Object.assign 拷贝的属性是..

elementUI的el-select 默认值显示value不显示label问题

lqlq54321的博客

06-18

5917

el-select 默认值显示value不显示label问题在做编辑页面时需要取到列表项数据回显默认值在做select回显的时候遇到了这个问题明明拿到的值和value中的值一样但是就是不转换成label 这种情况一般出现在value为数字的情况问题原因是返回的数字和el-option选框里value值的类型对应不上一个是 Numer 一个是 String 解决后如图解决办法1 既然el-option选框需要的value属性是String类型的,可以利用row这个一行数据,拿到el-o

this.form = Object.assign({}, row)中使用el-checkbox遇到的坑

qq_50048558的博客

03-24

245

原因使用 this.form = Object.assign({}, row)进行拷贝的时候，form已经不是初始化定义的form了，赋值成null，需要重新赋值回数组行式。

vue深拷贝的几种实现方式

最新发布

hualinger的博客

09-06

6488

只有一级属性为深拷贝，二级属性后就是浅拷贝，如[1,2,3,[1,2,3]]满足一般使用场景，但无法实现对象中方法(function)的深拷贝。6、数组使用数组方法进行深拷贝（concat、slice）7、使用Vue提供的观察者模式实现数组深度复制。8、使用ES6提供的扩展运算符实现数组深度复制。3、jQuery的extend方法实现深拷贝。只有一级属性为深拷贝，二级属性后就是浅拷贝。只有一级属性为深拷贝，二级属性后就是浅拷贝。比较全面的深拷贝，缺点是较为繁琐。1、通过递归方式实现深拷贝。

vue的复制功能

weixin_47353884的博客

06-07

6020

appendChild() 方法可向节点的子节点列表的末尾添加新的子节点。设备间传输数据很方便测试再也不用下软件了使用起来也超级简单。增加一个指定名称和治的新属性，或者把一个现有属性设定为指定的值。给一个按钮绑定点击事件,以下是方法。页面 index.vue 使用。2.value:要设置的属性值。1.name：要设置的属性名。在main.js里引用。组件库是View UI。

vue3+element.plus实现表格行内的编辑和新增

06-13

要在Vue3和element-plus中实现表格行内的编辑和新增，你可以使用element-plus提供的el-table-plus组件来替代el-table，el-table-plus支持行内编辑和新增功能。具体步骤如下： 1. 安装并引入element-plus组件库。 2. 在el-table-plus的column中设置prop属性，用来指定表格列的字段名。 3. 在el-table-plus的column中设置editable属性为true，表示该列可编辑。 4. 在el-table-plus的column中设置edit-template slot来自定义编辑时的表单组件。 5. 使用el-table-plus的@save事件监听保存数据事件，当保存数据时，将数据提交到后台或者更新本地数据。以下是一个示例代码： ```html <template> <el-table-plus :data="tableData" @save="handleSave"> <el-table-column label="姓名" prop="name" editable></el-table-column> <el-table-column label="年龄" prop="age" editable> <template #edit-template="{ modelValue, row, column }"> <el-input-number v-model="modelValue" :min="0" :max="200" /> </template> </el-table-column> <el-table-column label="地址" prop="address" editable></el-table-column> <el-table-column label="操作" width="120px"> <template #default="{ row, column }"> <el-button @click="handleEdit(row)">编辑</el-button> <el-button @click="handleDelete(row)">删除</el-button> </template> <template #edit="{ row, column }"> <el-button @click="handleSaveEdit(row)">保存</el-button> <el-button @click="handleCancelEdit(row)">取消</el-button> </template> </el-table-column> </el-table-plus> </template> <script> import { ref } from 'vue'; import { ElTablePlus } from 'element-plus'; export default { components: { ElTablePlus, }, setup() { const tableData = ref([ { name: '张三', age: 18, address: '北京市' }, { name: '李四', age: 20, address: '上海市' }, { name: '王五', age: 22, address: '广州市' }, ]); const editData = ref({}); const editIndex = ref(-1); const handleEdit = (row) => { editData.value = Object.assign({}, row); editIndex.value = tableData.value.indexOf(row); }; const handleSaveEdit = (row) => { Object.assign(tableData.value[editIndex.value], editData.value); editIndex.value = -1; editData.value = {}; }; const handleCancelEdit = () => { editIndex.value = -1; editData.value = {}; }; const handleDelete = (row) => { tableData.value.splice(tableData.value.indexOf(row), 1); }; const handleSave = () => { // 提交表格数据到后台或者更新本地数据 }; return { tableData, editData, editIndex, handleEdit, handleSaveEdit, handleCancelEdit, handleDelete, handleSave, }; }, }; </script> ``` 在上面的代码中，我们使用el-table-plus组件替代el-table，并在el-table-plus的column中设置editable属性为true，表示该列可编辑。在edit-template slot中，我们使用el-input-number组件来自定义编辑时的表单组件。在@save事件中，我们监听保存数据事件，并将数据提交到后台或者更新本地数据。在操作列中，我们使用default slot来显示编辑和删除按钮，使用edit slot来显示保存和取消按钮。在handleEdit方法中，我们保存要编辑的数据到editData中，并将要编辑的行的索引保存到editIndex中。在handleSaveEdit方法中，我们将编辑的数据保存到表格数据中，并清空editIndex和editData。在handleCancelEdit方法中，我们清空editIndex和editData。这样就实现了表格行内的编辑和新增功能。

解决 vue 使用 Object.assign({}, row) 二级属性 怎么深拷贝的问题

解决 vue 使用 Object.assign({}, row) 二级属性怎么深拷贝的问题