Vue 数组和对象更新后页面 DOM (二)

6 篇文章 0 订阅

上篇文章Vue 数组和对象更新后页面 DOM 不更新问题的解决方法。能够解决很多页面数据响应的问题,但是最近在项目中发现在某些情况下上篇文章的解决方式并不是针对任何问题的。

假设数据结构是下面的情况:

polist:{
    ...,
    list:{
        itemlist:[
            {a:1},
            {a:2}
        ]
    },
    ...
}

现在需要在某个方法中修改 修改 itemlist 数组中 index 为 1 的对象的 a 属性 。
使用上篇讲到的方法:

    <p>{{polist.list.itemlist[1].a}}</p>
    this.$set(this.polist.list.itemlist[1],'a',3)

发现页面中并没有发生变化,官网上面的解决方法在这种情况下并没有生效。
在这个问题上纠结了很久,试了又试,终于发现了问题所在,这种结构太深的数据结构, vue 并不会一直监视下去,所以数据结构不要超过 3 层。

所以要想实现上面的效果,需要想办法减少数据的层级,如果确实需要复杂的数据结构,可以在 data 中定义一个 list, 然后页面上绑定 list 中的值。

data(){
    return {
        itemlist:[]
    }
}
methods:{
    test(){
        this.list= this.polist.list

        this.$set(this.list.itemlist[1],'a',3)
    }
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值