昨天在做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);
    },
    ...
}
Logo

前往低代码交流专区

更多推荐