解决深拷贝v-model动态绑定问题,以及v-for里checkbox动态赋值问题

当时需求是根据楼房单元,层数,每层户数批量生成门牌号

1.循环生成单元块后,发现checkbox无法赋值;input无法输入,深拷贝关键unit[unit.houseNumberInput]

<div
        v-for="(unit,index) in unitList"
        :key="index"
        style="
      border-radius: 8px;
      border: 1px solid #eeeeee;
      height: 300px;
      margin-top: 15px;
      box-shadow: rgb(219,219,219) 0px 0px 8px 0px;
      ">
        <div
          style="height: 50px;
          line-height: 50px;
          color: #333333;
          background-color: #3C9FFF;
          border-radius: 8px 8px 0px 0px;
          width: 100%;">
          <span style="margin-left: 20px;font-size: 16px;color: #FFFFFF;font-weight: bold;">{{index+1}}单元信息</span>
        </div>
        <div style="display: flex;margin: 10px 20px;">
          <el-button type="primary" v-if="index>0" icon="el-icon-copy-document" @click="copyBeforeUnit(unit,index)">复制上单元</el-button>
          <el-button type="primary" plain icon="el-icon-house" @click="batchCreate(unit,index)">批量生成</el-button>
          <el-button plain icon="el-icon-delete" @click="clearHouseNumber(unit,index)">清空</el-button>
        </div>
        <div
          style="background-color: #FFFFFF;
          height:150px;
          border-radius: 9px;
          font-size: 14px;
          margin: 0 auto;
          box-shadow: rgb(219,219,219) 0px 0px 8px 0px;
          padding: 15px;
          overflow-y: auto;
          width: 92.5%;">
          <el-checkbox-group v-model="unit.checkHouseNumebrList" @change="handleCheckedHouseNumebrChange(unit,index)">
            <el-checkbox v-for="item in unit.houseNumbers" :label="item" :key="item" border style="margin-left: 0;margin-top: 10px;"></el-checkbox>
          </el-checkbox-group>
          <el-input type="number" v-model="unit[unit.houseNumberInput]" placeholder="输入门牌号点击回车即可生成房屋" style="width: 300px;margin-top: 10px;" @keydown.enter.native="saveHouseNumber(unit,index)"></el-input>
        </div>
      </div>

2.解决问题的关键是this.$set(this.unitList, index, unit);v-for时this.unitList即便是赋值了也不会刷新,this.$set()方法可以让循环的列表刷新指定下标的信息;继续通过unit[unit.houseNumberInput]获取input中动态绑定的值

    //复制上单元
    copyBeforeUnit(unit,index){
      let houseNumbers = this.unitList[index-1].houseNumbers
      let checkHouseNumebrList = this.unitList[index-1].checkHouseNumebrList
      unit.houseNumbers = houseNumbers.slice()
      unit.checkHouseNumebrList = checkHouseNumebrList.slice()
      this.$set(this.unitList, index, unit)
    },
    //批量生成门牌号
    batchCreate(unit,index){
      if (unit.houseNumbers.length === 0){
        //单元数 楼层数 每层户数 |    层数+0+户号
        getDetailUnit(this.buildingAndUnitInfo.id,index+1).then(res => {
          let unitInfo = res.data.data;
          for (let i = 1;i<=unitInfo.unitFloorNumber;i++){
            for (let j = 1;j<=unitInfo.unitHousehold;j++){
              unit.houseNumbers.push(i+"0"+j)
              //默认选中
              unit.checkHouseNumebrList.push(i+"0"+j)
            }
          }
          this.$set(this.unitList, index, unit)
        });
      }
    },
    //清空门牌号
    clearHouseNumber(unit,index){
      unit.houseNumbers = []
      unit.checkHouseNumebrList = []
      this.$set(this.unitList, index, unit)
    },
    //回车生成门牌号
    saveHouseNumber(unit,index){
      if (unit[unit.houseNumberInput] !== undefined && Math.floor(unit[unit.houseNumberInput]) == unit[unit.houseNumberInput]){
        if (!unit.houseNumbers.includes(unit[unit.houseNumberInput]) && unit[unit.houseNumberInput] !== ''){
          unit.houseNumbers.push(unit[unit.houseNumberInput])
          unit.checkHouseNumebrList.push(unit[unit.houseNumberInput])
          unit[unit.houseNumberInput] = ''
          this.$set(this.unitList, index, unit)
        }else {
          this.$message({
            message: '不可重复添加房屋',
            type: 'warning'
          })
        }
      }else {
        this.$message({
          message: '请输入整数',
          type: 'warning'
        })
      }
    },
    //存储房屋
    saveHouse(){
      this.btnDisabled = true
      let count = 0;
      for (let i in this.unitList){
        if (this.unitList[i].houseNumbers.length===0){
          count++;
          return this.$message({
            message: this.unitList[i].unitName+'单元未生成房屋',
            type: 'warning'
          })
        }
      }
      setTimeout(()=>{
        if (count === 0){
          this.buildingAndUnitInfo.buildingUnit = this.unitList.slice()
          console.log(this.buildingAndUnitInfo)
          saveHouse(this.buildingAndUnitInfo).then(() => {
            this.$message({
              type: "success",
              message: "保存成功!"
            });
            this.btnDisabled = false
            this.batchCreateHouseNumebrVisible = false;
            this.onLoad(this.page);
          });
        }else {
          this.btnDisabled = false
        }
      },500)
    }

3.批量生成的问题解决了,又发现取消选中怎么点都没有用,通过控制台输出发现每次点击都是原来的数组,这时候叕叕叕叕用到这个宝藏方法了this.$set(要刷新的数组,下标,值),一下解决了哈哈哈哈哈

handleCheckedHouseNumebrChange(unit,index) {
      this.$set(this.unitList, index, unit)
    },
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值