Vue-用$set赋值

不积跬步无以至千里~ 细节决定成败，加油💪🏻

一、使用方法

举例：

this.infoSorts[0].value = data.totalReadCount;

变成$set写法是：

this.$set(this.infoSorts[0],'value',data.totalReadCount);

二、适用情况

数据双向绑定失效时，就需要采用$set赋值。

下面是优秀滴哥哥给出的结论

• 一般来说 data里面声明的基本数据类型这种值，直接赋值就可以。
  • 比如：this.number=1; this.flag = false;。
• 但是如果是对象/数组这种，要修改对象/数组里面的某一个key的值：
  • 直接this.obj.name =xxx;这样去赋值的话，数据可能就不是响应式的；
  • 需要改成this.$set(this.obj,'name',xxx)这样，可以让数据是响应式的。
  • 【注意】 这儿的name是key值，要加引号。不加引号就会解析成变量，但如果你上面没有声明这个变量，就是undefined了。
• 所以以后如果是修改对象/数组里面的某个属性的属性值滴话，最好用$set去改。

• 如果数组用push pop shift unshift … 这样的基本操作数组的方法，vue是可以监听到的。可以不用$set。

1、举例：

如下图：获取到了数据，页面上的数据却没有展示。这种情况就是数据双向绑定失效啦，需要采用$set赋值。

2、解决方法：

用 $set赋值 代替 等号赋值。

代码如下：

messageListInfo: [], // 消息列表数据

三、比较举例

给如下图所示的值赋值时，采用哪种方法呢❓

答案：

• 上述这种情况的话 用等号赋值和$set赋值 两种方式都可以哟~
  • this.messageInfo = data;
  • 或者
  • this.$set(this, 'messageInfo', data);【注意：这里的messageInfo是key值，要加引号】
• 如果是改messageInfo里面的某个属性的属性值滴话，就最好还是用$set