解决vue A对象赋值给B对象,修改B属性会影响到A的问题
实际在vue中 this.A = this.B,没有进行深层赋值,只是把this.A的地址指向了与this.B相同的地址,所有对于A的修改会影响到B。
解决相互影响的思路是在this.A必须是新建的一个对象,这样才能保证不被指向同一地址,属性修改不会相互影响。
解决方式:
this.A=JSON.parse(JSON.stringify(this.B));
将对象转成字符串剔除对象属性后,再转换成对象赋值,这样能解决指向相同地址修改会相互影响的问题。
以上这篇解决vue A对象赋值给B对象,修改B属性会影响到A的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。
相关推荐
-
vue 数组和对象不能直接赋值情况和解决方法(推荐)
Vue 不能检测以下变动的数组: 当你利用索引直接设置一个项时,例如:vm.items[indexOfItem] = newValue 当你修改数组的长度时,例如:vm.items.length = newLength 当第一种情况需求时,可以使用this.$set(this.arr,index,newVal) Vue 不能检测对象属性的添加或删除: 可以使用this.$set(this.person,'age',12) 当需要添加多个对象时,Object.assign({},this.pers
-
解决vue A对象赋值给B对象,修改B属性会影响到A的问题
实际在vue中 this.A = this.B,没有进行深层赋值,只是把this.A的地址指向了与this.B相同的地址,所有对于A的修改会影响到B. 解决相互影响的思路是在this.A必须是新建的一个对象,这样才能保证不被指向同一地址,属性修改不会相互影响. 解决方式: this.A=JSON.parse(JSON.stringify(this.B)); 将对象转成字符串剔除对象属性后,再转换成对象赋值,这样能解决指向相同地址修改会相互影响的问题. 以上这篇解决vue A对象赋值给B对象,修改
-
解决vue无法侦听数组及对象属性的变化问题
一.数组 1.可以监听到的情况 如push.splice.=赋值(array=[1,2,3]) 2.无法监听到的情况 使用下标修改某个元素(这种比较常见) array[index] = 1 object.a = 3 直接修改数组length array.length = 5 3.解决方案 this.$set(array, index, data) - 这是个深度的修改,某些情况下可能导致你不希望的结果,因此最好还是慎用 this.dataArr = this.originArr this.$se
-
浅谈将子类对象赋值给父类对象
最近对将子类对象赋值给父类对象有点心得,想和大家分享一下.但本人水平有限,请各位指正和批评. 言归正传,下面是几个小例子,请大家看一看. 测试一 父类: public class Supclass { public void print() { System.out.println("this is 父类print()方法"+"--此时对象"+this.toString()); } } 子类: public class Subclass extends Supcla
-
解决vue接口数据赋值给data没有反应的问题
问题: 就是我在接口赋值给了data的变量,然后组件的效果没有出来(我的是旋转效果) 代码如下: data() { return { slides: [] } }, mounted() { this.request() }, methods: { request() { this.$http.post('xxxxxxxxxxxx', {}, (res) => { if (is.object(res)) { if (res.status === 'succ') { this.slides = re
-
解决Vue.js 2.0 有时双向绑定img src属性失败的问题
错误用法: <img src="http:0.0.0.127/{{item.imgname}}" alt=""> 正确用法: <img src="'http:0.0.0.127/'+item.imgname" alt=""> 绑定属性的时候,前面加: 属性的值可以用表达式,但注意字符串拼接的时候要加引号 以上这篇解决Vue.js 2.0 有时双向绑定img src属性失败的问题就是小编分享给大家的全部内
-
vue子组件通过.sync修饰符修改props属性方式
目录 子组件通过.sync修饰符修改props属性 子组件修改父组件prop的几种方式 常用方式 取巧方式 子组件通过.sync修饰符修改props属性 在vue子组件中,如果我们直接修改props中的属性,会报错: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed
-
Vue对象赋值视图不更新问题及解决方法
当我们需要对vue里面data数据做动态更新. 如下,实例化了Vue对象,其下vueData为data属性指向,现在我们需要由后台装载完整的data对象 现在我们需要装载更新完整的data对象,常规的赋值方式并不会引起视图的更新,双向绑定会失效. 如上图中默认broker_list为空对象,装载完之后broker_list 包含新项(ZY98) 解决办法: $.each(clientData, function (k, v) { Vue.set(vueData,k,Object.assign({
-
解决Vue不能检测数组或对象变动的问题
来看一个实例: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue</title> <script src="https://unpkg.com/vue@2.3.3/dist/vue.js"></script> <style> li:hover
-
解决vue组件props传值对象获取不到的问题
先说问题,父组件利用props向子组件传值,浏览器 console 有这个值,但是获取不到内部的属性,困了我3个小时,真的** personal console 以下为原代码 1.home.vue(父组件)--personal是被传的参数 <!--子组件--> <form-picker class="form-picker" :personal="personal" > </form-picker> export default
-
vue $set 实现给数组集合对象赋值
vue $set 数组集合对象赋值 在vue自定义数组对象集合中,想要给每个数组对对象再添加一个属性和值. // data定义一个集合对象 responseData:[ {'id':'1','name':'女装','price':115,'num':1,'pic':'../static/img/1.jpg'}, {'id':'2','name':'男装','price':110,'num':1,'pic':'../static/img/2.jpg'}, {'id':'3','name':'童装'
随机推荐
- Delphi实现截屏存盘的方法
- docker实现导出、导入和数据搬迁
- XHTML标准语法
- Ubuntu下安装mongodb 3.4的详细过程
- 论坛UBB代码 推荐
- js实现弹窗居中的简单实例
- 使用JS或jQuery模拟鼠标点击a标签事件代码
- php代码书写习惯优化小结
- php根据用户语言跳转相应网页
- python文件和目录操作函数小结
- jsp与sql语句的混合使用示例
- js Canvas实现圆形时钟教程
- php中创建和调用webservice接口示例
- SQL Server全文检索查询浅析
- c#多线程网络聊天程序代码分享(服务器端和客户端)
- php递归json类实例
- 详解Android XML中引用自定义内部类view的四个why
- js操作Xml(向服务器发送Xml,处理服务器返回的Xml)(IE下有效)
- Android使用ImageView实现支持手势缩放效果
- asp.net System.Guid ToString五种格式