vue 踩坑赋值后原对象的值改变

已于 2023-04-10 16:58:29 修改
阅读量114 收藏
点赞数
文章标签： vue.js json 前端 Powered by 金山文档
于 2023-03-17 18:13:04 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34631220/article/details/129626001
版权

创建一个新的对象，指向新的内存地址，通过JSON解析

data是原对象

let datas = JSON.parse(JSON.stringify(data));

大得369
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
vue踩坑记录之数组定义和赋值问题
12-29
问题场景：vue页面初始化展示请求后台返回的数据失败，没有报错 有效日期> type=daterange range-separator=至 start-placeholder=开始日期 end-placeholder=结束日期> data(){ return{ effective
Vue对象赋值视图不更新问题及解决方法
10-16
主要介绍了Vue对象赋值视图不更新问题及解决方法，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
js对象赋值只保留存在的属性_Vue2和Vue3中对数组、对象新属性响应式的对比
weixin_39644915的博客
11-21 1306
7月份曾写过一篇《vue2中为何不能用索引实现数组响应式？》，分析了vue对于数组响应式的处理方式，是没有为数组中的元素设置set和get函数。但是后来想想这是vue对于数组的处理方式，并非是一个原因，只是一个结果。而真正的原因其实是js的数组函数导致的。比如通过push向js中添加元素时，是往数组中加了一项，而这个项由于是新加入的，不会有依赖收集时的se...
如何解决给vue 变量赋值后，赋值前的变量拿到了赋值后的值
m0_46365130的博客
04-25 3805
重现一下踩坑现场 <template> <view @click="make">{{text}}</view> </template> <script> export default { data() { return { text: '' }; }, methods: { ...
【bug】后端接口获取的对象，赋值后打印出来的值不对，已解决
花椒和蕊的博客
06-08 371
当我从接口获取数据进行赋值的时候，从network里看接口返回的对象参数，和我赋值后自己定义的对象参数一比对，发现里面有些字段的值不对应，遇到这种情况，基本上都是因为我们拿到数据之后，又去其他地方进行了重新赋值。bug重现：一个表单类的页面，保存后会调获取详情的接口，当我赋值给自己定义的对象后，又把这个对象当作参数传到封装的子组件中，在子组件的watch中监听这个对象，做一些判断。写错的地方就在于监听里，将对象重新赋值了，正确的应该是给我需要的参数赋值对象里的值，我自己糊涂写反了。
【vue3】响应式代理vs原始对象
芳草萋萋鹦鹉洲哦
03-28 446
只有代理对象是响应式的，更改原始对象不会触发更新。因此，使用 Vue 的响应式系统的最佳实践是 仅使用你声明对象的代理版本。这个规则对嵌套对象也适用。
JSON.parse()和JSON.stringify()
一个程序员的成长之路。。。
12-04 1837
JSON.parse()概述： JSON.parse() 方法将一个 JSON字符串解析成一个javascript值。在解析过程中，还可以选择性的修改某些属性的原始解析值。语法：JSON.parse(text[, reviver])参数：text：要被解析成JavaSctipt值的字符串，查看 JSON 对象学习的JSON 语法的说明。 reviver： 可选参数，如果是一个函数，则规定了原始值
vue 避免变量赋值后双向绑定的操作
01-18
如： this.list = this.list2, 结果在list改变后 ...补充知识：解决vue中v-model绑定的变量赋值给了另一个变量后，两个变量同时改变 先来看一下问题背景 我们要做一个 搜索+分页 的功能，使用vue 我们将分页控件绑定了
Vue 赋值后原数据随赋值后的数据的变化而变化
最新发布
MtangEr的博客
02-29 624
当修改赋值后的新数据时， 不要修改到原数据，可以使用的多种赋值方式
vue中把对象中所有的key赋为空值
seimeii的博客
04-03 887
vue中把对象中所有的key赋为空值
vue中变量赋值后，改变原数据
weixin_44488084的博客
12-01 900
使用this.xxx = this.yyy后，后续修改xxx后，yyy会随之改变，因为它俩指向的是同一对象地址 解决方式： this.xxx = JSON.parse(JSON.stringify(this.yyy))
vue中this的数组赋值后，改变随着改变原数据
qq_39151491的博客
01-08 2385
在vue项目中，把某个对象数组赋值给一个变量，改变这个变量中的某个对象的格式，会改变原数组； 解决办法： 将 let item = this.itemArray；改成 let item = JSON.parse(JSON.stringify(this.itemArray));即可。 ...
简述vue表格数据赋值给新变量后，原表格数据也随新变量数据的变化而发生改变
miem_yang的博客
09-01 656
vue表格数据赋值给新变量后，原表格数据也随新变量数据的变化而变化
解决vue A对象赋值给B对象,修改B属性会影响到A的问题
weixin_42475906的博客
11-15 399
在vue中【=】在对象赋值里面，没有进行深层赋值，【this.A 】指向的依旧是【 this.B 】里面的原地址，所以修改了【 this.A】里面的属性，【 this.B】里面的属性也会发生改变。例：this.A = this.B 或 const A = this.B 等形式的 对象赋值，修改新对象A导致原对象B同步变化。
【Vue】vue 数据赋值给新变量后，原数据也随新变量对数据的变化而变化解决方案
一只洒鹿
06-24 4143
vue 数据赋值给新变量后，原数据也随新变量对数据的变化而变化 错误： let list = this.list1 错误写法将污染源数据，将改变list1的数据 正确： let list = JSON.parse(JSON.stringify(this.list1)); 备注： **JSON.stringify()**方法用于将 JavaScript 值转换为 JSON 字符串。 JSON.parse() 方法将数据转换为 JavaScript 对象。 JS 对象(Object)和字符串(String)
vue 数据赋值给新变量后，原数据也随新变量对数据的变化而变化
weixin_41968524的博客
01-18 1322
错误示例： let nodes=this.approval.allNodes 本意是想将allNodes的值赋值给nodes，做一个备份，由nodes进行操作，但这样赋值依旧会改变allNodes的值 正确示例： let nodes= JSON.parse(JSON.stringify(this.templateForm)) ...
Vue脱坑之如何解决vue 赋值后原数据随赋值后的数据的变化而变化
qq_37743065的博客
08-28 3939
Vue脱坑之如何解决vue 赋值后原数据随赋值后的数据的变化而变化 转载 出处 问题原因 1.在vue中 this.A = this.B,没有进行深层赋值，只是把this.A的地址指向了与this.B相同的地址，所有对于A的修改会影响到B 2.解决相互影响的思路是在this.A必须是新建的一个对象，这样才能保证不被指向同一地址，属性修改不会相互影响 错误实例 this.leftColumn...
【Vue】数组被赋值之后修改，会影响赋值数组
AcongMiss的博客
05-11 3937
现象： let list = res.data.rows || []; // 改动list, res.data.rows也变了 原因： res.data.rows直接将地址赋给了list，所以list改变了res.data.rows也变了 解决办法： let list = [...res.data.rows] || []; ...
vue将定义在data中的对象数据赋值给变量后，原数据随新变量数据的变化也发生变化
weixin_52606798的博客
01-16 784
直接赋值，只是地址指向，两个对象使用相同的地址，左边的变量指向的地址和右边的变量一样，持有相同的引用，所以对newObj修改，oldObj的值也会变化。对newObj进行操作，对应的oldObj的数据会随之变化。先将原对象转换成字符串，再转化为对象或进行深拷贝。在方法中使用将该数据赋值给一个新的对象进行使用。
vue 遍历赋值对象
08-27
在Vue中，可以使用v-for指令来遍历对象中的数组并进行赋值操作。通过在v-for指令后面使用in关键字，将数组中的每个元素赋值给一个临时变量，然后在模板中使用该变量进行数据展示或其他操作。以下是一个示例代码： ```html <div v-for="item in objectArray" :key="item.id"> <span>{{ item.name }}</span> <span>{{ item.age }}</span> </div> ``` 在上述示例中，我们使用v-for指令来遍历名为objectArray的数组。每次循环，数组中的一个元素会被赋值给变量item。然后我们可以通过item来访问该元素的属性，例如item.name和item.age来展示其对应的值。需要注意的是，为了提高性能，我们还需要为每个循环的元素设置一个唯一的key属性，这里我们使用item.id作为key。 希望以上信息对您有所帮助。<span class="em">1</span><span class="em">2</span> #### 引用[.reference_title] - *1* [vue遍历对象中的数组取值示例](https://download.csdn.net/download/weixin_38713801/12932484)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* [vue2 + webpack5相适配的 能成功打包的 package.json 文件](https://download.csdn.net/download/weixin_43405300/88252148)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

大得369

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值