vue自定义指令bug

问题描述:

页面加载时,报已下错误。同时,页面数据不显示

环境介绍:

已经添加了vue自定义指令permission,实现如下,用以控制元素显示权限

复制代码
app.directive('permission', (el, binding) => {
    if (!store.hasPermission(binding.value)) {
        if (!binding.value.includes('list')) {
            el.remove();
        } else {
            // 清除不显示的元素
            el.innerHTML = '';
            // 创建一个父节点
            const parentNode = document.createElement('div');
            parentNode.style.width = '100%';
            parentNode.style.display = 'flex';
            parentNode.style.justifyContent = 'center';
            parentNode.style.alignItems = 'center';

            const imgElement = document.createElement('img');
            imgElement.src = '@/../../public/layout/images/noPermission.png'; // 设置图片路径
            imgElement.alt = '无权限访问图片';
            imgElement.style.objectFit = 'contain';
            imgElement.style.height = '40vh';

            parentNode.appendChild(imgElement);
            el.appendChild(parentNode);
        }
    }
});

页面实现代码

html 复制代码
<Button 
v-if="dialogForm.docStatus == 0" 
v-permission="'project:info:basic'" 
label="提交" 
type="button" 
severity="success"
 @click="onSave(1)"
></Button>

其他介绍:

已知dialogForm.docStatus已经在初始时定义了,并被赋值0;后续,通过接口,将返回结果赋值给该变量。

乍一看是不是没有问题,但是页面确实也报错,不显示数据。

问题分析:

初始页面时,因为初始赋值,button元素是存在的,通过vue自定义指令,发现需要删除该元素,结果因为页面接口返回结果,出发了v-if,直接元素没了。所以自定义指令中的删除逻辑,发现家被偷了,所以报错了。

解决方法:

直接外面包一层,保证自定义指令逻辑执行时,有元素可以操作。

html 复制代码
<div v-if="dialogForm.docStatus == 0">
      <Button 
        v-permission="'project:info:basic'" 
        label="提交" 
        type="button" 
        severity="success" 
        @click="onSave(1)"
        ></Button>
</div>

问题回顾:

对于浏览器的报错,还是没法快速定位,只是答题猜到是因为元素操作导致的,但是结合复杂的页面逻辑,没法准确定位问题(特别是,没有报自己代码错误位置的提示)。有大佬能帮忙解答下,如何定位的技巧吗。

相关推荐
黑客思维者3 小时前
《我是如何用C语言写工控系统的漏洞和Bug》连载(1)内容大纲
c语言·bug·工控漏洞
川石教育11 小时前
软件测试中的Bug知识总结
软件测试·bug·压力测试·缺陷管理·bug分类
特立独行的猫a11 小时前
HarmonyOS应用开发之界面列表不刷新问题Bug排查记:从现象到解决完整记录
华为·bug·harmonyos·ui刷新
hfd199011 小时前
Bug 排查日记:一次曲折的技术解谜之旅
bug
As331001011 小时前
Bug 排查日记:技术难题的攻克之旅
bug
初级代码游戏2 天前
Git或TortoiseGit的小BUG(可解决):空库报错Could not get hash of ““
git·bug
Tisfy3 天前
MacOS - 记录MacOS发烫的好几天 - 幕后黑手竟然是
macos·bug
明月与玄武4 天前
为什么程序员总是发现不了自己的Bug?
bug·为什么程序员总是发现不了bug
油炸自行车4 天前
【Qt】bug排查笔记——QMetaObject::invokeMethod: No such method
c++·笔记·qt·bug
Direction_Wind5 天前
flinksql bug: Non-query expression encountered in illegal context
数据库·sql·bug