Vue关于对象直接赋值的坑及解决
更新时间：2022年09月07日 16:51:08 作者：Da_xiong0
这篇文章主要介绍了Vue关于对象直接赋值的坑及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
Vue对象直接赋值的坑
受JavaScript的限制，Vue不能监听到对象属性的添加或删除。如果这样做了，你会发现添加或删除的属性不是响应式的，即无法及时更新视图。
如果我们需要将a对象赋值给b对象时，要么把b对象的所有属性都在a对象中定义一下，要么 使用this.$set(this.object,key,value)将b对象中有a对象中没有的属性set进去，或者使用Object.assign(this.a,this.b) 将所有可枚举属性的值从b对象复制到a对象并返回a对象。（如果有同名属性的话，b属性的值会覆盖a属性的值）
注意：目前IE浏览器不兼容Object.assign()，如果需要兼容IE的话最好不要直接使用这个方法。
比如，我们在页面上绑定了一个dataForm.userIds
但我们并没有在data中对dataForm.userIds进行初始化的话，
即使我们在页面created的时候给它赋值了， 赋值是能赋进去的
但这个userIds属性仍然不是响应式的，他的值改变不会触发视图的渲染
我们可以这样做来避免这个问题：
初始化userIds属性
或 使用this.$set(this.object,key,value)添加对象的userIds属性，这时候添加的属性是响应式的。
Vue对象的赋值Object.assign({}, row)
复制功能，想单独去掉id不传过去，思路设置局部变量，把整个row对象赋值给newData变量，使用 Object.assign({}, row)；使用delete方法删除newData中的id
copyStep(index,row){
// 将对象赋值给一个变量
let newData = Object.assign({}, row)
delete newData.id
将处理完的变量传给下面的两个方法
this.addStep(index,newData);
this.showEditDialog(index + 1,newData,true);
},以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue2.0结合Element-ui实战案例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-03-03
这篇文章主要为大家介绍了tauri和vue通信的问题解决方案示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-10-10
这篇文章主要为大家详细介绍了vue实现计算器的封装，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
这篇文章主要介绍了Vue-admin-template 添加、跳转子页面问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
这篇文章主要为大家介绍了让ChatGPT解读Vue3源码过程解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-02-02
这篇文章主要介绍了vue部署包可配置后台接口地址的相关知识，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-03-03
这篇文章主要介绍了vue keepAlive缓存清除问题案例详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下2021-09-09
vue中@click和@click.native.prevent的区别
这篇文章主要介绍了vue中@click和@click.native.prevent的区别，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
本篇文章主要介绍了详解从新建vue项目到引入组件Element的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
vue中有一个很神奇的东西叫v-model，它可以完成我们的需求。，本文重点给大家介绍vue中使用v-model完成组件间的通信,需要的朋友可以参考下2019-08-08
最新评论