elementUI点击多选框数据改变,视图不改变问题
先说一下我的场景:就是在表格里面选择某种产品,然后把这些产品加入订阅单,点击订阅单,就出现下面的图片,默认所有的产品全选,我就给所有数据加了一个chenked为true的属性遇到的问题:由于数据是从表格传过来的,然后点击发布渠道,发现控制台数据变了,但是视图并没有更新,如下图:我点击测试模型,控制台打印为false,但是视图就是不改变原因:由于我传过来的数据是数组,如下图,数组中数据发生变化,vu
·
先说一下我的场景:
就是在表格里面选择某种产品,然后把这些产品加入订阅单,点击订阅单,就出现下面的图片,默认所有的产品全选,我就给所有数据加了一个chenked为true的属性
遇到的问题:由于数据是从表格传过来的,然后点击发布渠道,发现控制台数据变了,但是视图并没有更新,如下图:我点击测试模型,控制台打印为false,但是视图就是不改变
原因:由于我传过来的数据是数组,如下图,数组中数据发生变化,vue是侦听不到的,但是重写的这几个数组的方法(比如splice()、pop、push等)修改的数组是可以侦听到的,这几个方法都有被vue重写。
解决: 下面两种方法都可以
this.subscribeData.splice(); // 更新视图
this.$forceUpdate(); // 强制更新
部分代码如下:
<div class="subscribe-list">
<div class="subscribe-list-title">订阅单</div>
<el-checkbox
v-model="checkAll"
@change="handleCheckAllChange">全选</el-checkbox>
<div style="margin: 10px 0;"/>
<div
v-for="(item, index) in subscribeData"
:key="index"
class="model-name">
<el-checkbox
v-model="item.checked"
class="model-name-check"
@change="checked=>changeCheck(checked, item)">
{{ item.modelName }}
</el-checkbox>
<div class="release-channel">
<div class="release-channel-title">发布渠道</div>
<div class="release-channel-content">
<el-checkbox-group v-model="item.publishChannel">
<el-checkbox
v-for="(item, index) in publishChannels"
:key="index"
:label="item.code">
{{ item.label }}
</el-checkbox>
</el-checkbox-group>
</div>
</div>
</div>
</div>
changeCheck(checked, item) {
console.log(checked);
this.subscribeData.forEach(val => {
if (val.id === item.id) {
val.checked = checked;
}
});
this.subscribeData.splice(); // 更新视图
for (let i = 0; i < this.subscribeData.length; i++) {
if (!this.subscribeData[i].checked) {
this.checkAll = false;
return;
}
this.checkAll = true;
}
},
更多推荐
已为社区贡献17条内容
所有评论(0)