v-if与v-show造成部分元素丢失的问题——v-if复用元素问题

问题描述

在写tab切换时遇到了一个问题,以下为简化后的问题所在的代码:

<img v-if="tabIndex === 2" id="t1">
<div v-if="tabIndex === 2" id="t2"></div>
<div v-if="tabIndex === 2" id="t3"></div>
<div v-show="tabIndex === 2" id="t4">
    <div id="content"></div>
</div>

当页面加载时,先向id为content的div中添加了一些元素:

function addContent() {
    const newDiv = document.createElement('div');
    newDiv.innerHTML = '123456789';
    document.getElementById('content').appendChild(newDiv);
}
  • 如果当tabIndex为2时执行addContent(),上述123456789能够正常显示;
  • 但如果:
    • 在此时将tabIndex改为1,再将tabIndex改为2,
    • 或者在tabIndex不为2时执行addContent(),再将tabIndex改为2,
      这两种情况下,123456789都无法正常显示。

问题探索

首先尝试将目标元素输出到控制台。在切换tabIndex前,先获取原来的元素:

var oldT4 = document.getElementById('t4');
var oldContent = document.getElementById('content');

此时输出显然能得到正确的结果。
然后在切换tabIndex后,再获取新的元素:

var newT4 = document.getElementById('t4');
var newContent = document.getElementById('content');
console.log(oldT4, newT4);
console.log(oldContent, newContent);

此时会发现:

  • oldContent元素虽然能正常输出,但在页面上已经不存在了,此时oldContent仅仅是引用了一个不存在的元素;
  • newContent元素就是当前页面上的content元素,但其中的内容已被清空。
  • newT4元素就是当前页面上的t4元素。
  • oldT4却离奇的变为了t2元素,console.log(oldT4 === document.getElementById('t2'))的结果为true

问题原因

这是因为t4tabIndex切换时,复用了被v-if隐藏的t2元素,复用时会重新渲染t4内的所有内容,这种情况下,动态添加到content元素中的内容就会被清空。
这里复用的顺序则是从第一个同样为div的被v-if隐藏的元素开始复用,即t2元素。类似的,如果此时进一步将t2元素的v-if修改成v-show,则oldT4就会去复用t3元素。

解决方案

要保留content元素中的内容,可以考虑:

  1. t2t3v-if改成v-show
  2. 如果确实不方便修改v-if,则可以给t2t3添加key属性,使其不会被复用。

  

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

系统免驱动

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值