vue中给对象或数组增加响应式字段

发表于 阅读次数： 本文字数： 977 阅读时长 ≈ 1 分钟
前言

最近前端项目中有一个需求，tabbar需要增加一个角标显示未读数量，uview中自带badge属性可用，但是遇到了一些小问题，无法响应式更新页面中的数量，下面记录一下

解决

我的tabbar数组中的item是这样的

1
2
3
4
5
6
{
    "pagePath": "/pages/a/b",
    "text": "消息",
    "iconPath": "/static/tab-icons/a.png",
    "selectedIconPath": "/static/tab-icons/ab.png"
  }

如果需要使用badge，需要增加一个自带，由于这个是单独定义在一个js文件中的，所有item是没有badge这个字段的，所以我也不想改动这个js中item，在其中加一个badge字段，所以我就直接在请求接口回来后，这样赋值

1
list[0].badge = 1 // list就是上述item的数组，0就是上面第一个，给这个字段赋值个1

发现数据虽然改变 ，但是页面上的数字没改变，刷新后才正确！所以一定是这样加字段不是响应式的

查阅了vue的文档，的确是这样的，如果在实例创建之后添加新的属性到实例上，它不会触发视图更新

所以有如下方法可以解决

1、使用Vue.$set，方法接收三个参数，如果是对象，则

1
this.$set(this.obj, 'badge', 1)

第一个参数是对象，第二个参数是要添加的字段key，第三个字段是value

如果是数组

1
this.$set(this.list, 1, item)

第一个参数是list，第二个参数是index，第三个是item

所以我的代码改为了这样

1
2
3
this.tabBarList[0].badge = 1
//给审批item增加badge字段，需使用$set，否则badge非响应式，无法更新页面
this.$set(this.tabBarList, 0, this.tabBarList[1])

首先给这个0的badge增加一个字段，然后再set赋值，发现可以了

2、使用object.assign方法，这个适合对象，我没有试过，所以不做评论，后续用到了再补充，建议使用第一种