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

62次阅读

共计 927 个字符，预计需要花费 3 分钟才能阅读完成。

在理论开发中，咱们常常会遇到上面这个场景：
从后端同学的接口里申请到的数据，不免不能满足本人的应用，这时候咱们须要遍历这些数据，增加上本人须要的属性 ，而后美滋滋的进行渲染~
可是这个时候常常会呈现预期之外的谬误：

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

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

在给 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;
})

应用 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 响应式原理链接深刻响应式原理。

以上内容如有谬误，欢送大家斧正。大家有更多更好的实现形式也欢送补充~~

正文完