teleport与el-drawer组合使用,form回显故障 form数据改变父组件的也直接变化 解决方法

 <teleport v-if="teleportShow" to="#app-container">
    <vAdd
      v-if="addVisible"
      :isEdit="isEdit"
      v-model:open="addVisible"
      :title="title"
      :good-id="addId"
      @back="infoBack"
    />

vAdd中的drawer组件 通过onMounted 无法回显

  onMounted(() => {
    if (props.int > -1) {
      ruleForm.value = { ...props.markets };
      labels.value = props.markets.labels;
      ruleForm.value.labels = [];
    }
  });

原因:vAdd中的drawer组件 只在teleport显示时mounted一次,故form拿不到数据

解决办法

 <vSell
    ref="sell"
    v-if="sellObj" //每次drawer打开时重新渲染
    v-model:show="sellObj"
    :markets="markets"
    title="设置"
    :int="int"
    width="600px"
    @close="close"
    @set-sell="setSell"
  />

 ruleForm.value = { ...props.markets };
//若写成ruleForm.value = props.markets  ruleForm改变,父组件的markets  也会改变!!!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值