Vue中数组数据的更新问题

昨天在做vue项目的列表中描述字段的显示更多的功能时,对每一个列表项绑定了与显示更多功能有关的属性,因此用到了数组,并且使用computed进行赋值。
这时出现一个问题,直接修改数组指定位置的值,视图上并不会更新。
参考了网上的部分解决方案以及官方文档之后
vue文档中的数组更新检测,终于实现了自己想要的效果

<div class="content" :class="{'has-more':open[index]}">
    {{item.comments}}
    <div class="more pull-right" @click="toggleMore(index)">{{moreTxt[index][0]}}</div>
</div>
data() {
    return {
        a: [],
        b: [],
    }
},
computed: {
    open: function(){
        let _this = this;
        for(let i=0; i<_this.list.length; i++){  //list为列表信息,就不附上了,下同
            _this.a[i] = Object.assign({}, _this.a[i], true);
        }
        _this.a = Object.assign({}, _this.a);
        return _this.a;
    },
    moreTxt: function () {
        let _this = this;
        for(let j=0; j<_this.list.length; j++){
            _this.b[j] = Object.assign({}, _this.b[j], {'0':(_this.open[j]?'详情':'收起')});
        }
        _this.b = Object.assign({}, _this.b);
        return _this.b;
    }
},
methods: {
    toggleMore(index) {
        let newValue = this.open[index];
        newValue = !newValue ;
        this.$set(this.open, index, newValue);
    },
    ...
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值