vue v-else中使用document.getElementById获取不到值的问题

vue v-else中使用document.getElementById获取不到值的问题
这个问题困扰了我两天,我经过反复排查,终于定位到了问题出现在v-if / v-else 判断属性中,

判断1:我把含有id的标签写在了v-else中,结果,通过document.getElementById获取不到组件,

判断2:然后我尝试,把含有id组件写在v-if中,这时可以获取到组件了,但是当v-else的组件显示出来以后,发现同一个位置,v-else页面控件对应的位置也能获取到这个id,于是我发现,使用v-if和v-else,他们是共用一个画布页面,位置也是对应覆盖的,所以相同位置会赋值相同的id,而且id只能写在v-if中,写在v-else中id不会被挂载

解决方案:使用v-show来替换,完美解决。
备注:这个问题是发生在对接阿里云上传服务时候,使用了PlUploader注册id的方案,因为这个组件实例化时需要传入id参数。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
// var agent, password, mode, phoneId //登录所需参数 // window.onload = function () { // init(); // }; //初始化电话条 function init() { var iframe = document.createElement('iframe'); iframe.name = "uinCall"; iframe.id = "uinCall"; iframe.ref = "uinCall"; iframe.allow = "microphone"; iframe.src = "https://ykf.uincall.com/telephonebarplugin/index.html"; // iframe.src = "https://ceshi.uincall.com/telephonebarplugin/index.html"; var telephoneBar = document.getElementById("telephoneBar"); if (telephoneBar) { telephoneBar.appendChild(iframe); var uinCall = document.getElementById("uinCall"); console.log('@@@-', uinCall); iframe.style.width = telephoneBar.getAttribute("data-width"); iframe.style.height = telephoneBar.getAttribute("data-height"); iframe.style.border = 0; } } //打印来自电话条内的抛出事件 window.addEventListener('message', function (e) { // console.log('@EchoData','message>>',e) console.info(e); if (e.data) { try { var resData = JSON.parse(e.data); // 动态修改iframe的高度 if (resData && resData.key && resData.key === 'changeCallHistoryState') { var telephoneBar = document.getElementById("telephoneBar"); var uinCall = document.getElementById("uinCall"); var frameHeight = telephoneBar.getAttribute("data-height"); if (resData.data) { // 显示 var heightConfig = parseInt(frameHeight); uinCall.style.height = (!heightConfig || heightConfig < 310) ? '310px' : heightConfig + 'px'; } else { uinCall.style.height = frameHeight; } } } catch (err) { console.info(e); } } }); //高级话务 function telephoneFunction(data) { let uincall = document.getElementById('uinCall'); if (uincall) { uincall.contentWindow.postMessage(data, '*'); } else { init(); uincall = document.getElementById('uinCall'); if (uincall) { setTimeout(() => { uincall.contentWindow.postMessage(data, '*'); }, 500); } } } 用vue优化代码编程
07-22

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值