vue 使用this.$set添加更改新属性的问题

南柯彡

已于 2022-11-30 08:56:44 修改

阅读量1k

点赞数

文章标签： vue.js 前端

于 2022-11-29 17:43:45 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_42574985/article/details/128102340

版权

在Vue中使用this.$set修改对象属性时，如果属性值是数组，原数组会受到影响。当修改新属性(newtags)导致原数组(product.tag)改变。原因是Vue的响应式原理。解决方法包括：1.为空数组重新赋值；2.使用JSON序列化避免引用。这两种方式可以防止原数组被意外修改。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在使用到this.$set 给某个对象的属性值赋值的时候，大多格式为this.$set( target, key, value )。

但若value为该对象的原属性数组，如：

 this_.getProductListTable.productList.forEach((item, i) => {
                this_.$set(item, 'index', i);
                this_.$set(item, 'newtags', item.product.tag);
               })
               
//product.tag里面的值为数组

那么之后更改该对象的新属性值（newtags.push(xxxxxx)）时，原数组(item.product.tag)会随之改变。

原因可能为this方法中指向的是同一块数据域，

解决方法：1.如果改为value为空再重新进行赋值处理，如

this_.$set(item, 'newMetas', []);

2.或者将value转换为json格式在转出，如：

this_.$set(item, 'newTags', JSON.parse(JSON.stringify(item.product.tag)));