Vue中数组数据的更新问题
昨天在做vue项目的列表中描述字段的显示更多的功能时,对每一个列表项绑定了与显示更多功能有关的属性,因此用到了数组,并且使用computed进行赋值。这时出现一个问题,直接修改数组指定位置的值,视图上并不会更新。参考了网上的部分解决方案以及官方文档之后vue文档中的数组更新检测,终于实现了自己想要的效果<div class="content" :class=&qu
·
昨天在做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);
},
...
}
更多推荐
已为社区贡献1条内容
所有评论(0)