先说一下我的场景:
在这里插入图片描述

就是在表格里面选择某种产品,然后把这些产品加入订阅单,点击订阅单,就出现下面的图片,默认所有的产品全选,我就给所有数据加了一个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;
      }
    },

Logo

前往低代码交流专区

更多推荐