Axios从接口取回数组数据并遍历添加自己需要的属性

Posted 2021-09-15 Mask

核心点：嵌套对象添加响应式property

在实际开发中，我们经常会遇到下面这个场景：
从后端同学的接口里请求到的数据，难免不能满足自己的使用，这时候我们需要遍历这些数据，添加上自己需要的属性，然后美滋滋的进行渲染~
可是这个时候经常会出现预期之外的错误：

• 首先就是我们获取到的数据，在进行模板渲染的时候，可能会报错，新添加的某某属性找不到。
• 或者当我们添加一个类似于CheckBox的checked属性时，在进行选中状态的切换时，最初赋值的属性值（例如false）不会被改变，也就是没有触发vue的双向数据绑定。

这时候怎么办呢？下面提供两种解决办法，

1. 在给data里的数据赋值之前，遍历接口返回的数据

   /*
   假设getList为我们获取数据的接口，返回一个数组列表
   返回格式：[
       {
           time: 1个月,
           price: 2000
       },
       {
           time: 2个月,
           price: 3000
       },
       {
           time: 3个月,
           price: 4000
       }
   ]
   最终要进行模板渲染的data里的变量：myData
   */
   this.getList().then(res=>{
       // 注意 下面这种写法会导致上面的错误~
       this.myData = res;
       this.myData.forEach(item=>{
           item.checked = false;
       })
       // 下面代码为正解
       res.forEach(item=>{
           item.checked = false;
       })
       this.myData = res;
   })

2. 使用vm.$set实例方法向嵌套对象添加响应式property

   // 语法如下：
   this.$set(this.someObject,\'b\',2)
   // 在上例中，假设我们拿到接口返回的值后，需要立即给myData赋值，就可以这样操作
   this.getList().then(res=>{
       this.myData = res; // 立即赋值
       this.myData.forEach(item=>{
           // item.checked = false; 这样添加的property不是响应式的
           // 正解如下
           this.$sets(item, \'checked\', false);
       })
   })

最后附上Vue响应式原理链接 深入响应式原理。

以上内容如有错误，欢迎大家指正。大家有更多更好的实现方式也欢迎补充~~