vue中v-if 和v-permission 共同使用的坑及解决方案

背景

后台系统某功能按钮需要订单状态和用户权限共同校验是否显示，将权限校验和v-if共同作用在同一div中，下方为实例代码

<div v-if="status==0">
    <div @click="function1">
　　　　某按钮功能
　　</div>
</div>
<div v-if="status==1" v-permission="['admin']">
    <div @click="function2">
　　　　某按钮功能
　　</div>
</div>

在进行直接查询时无异常，没有显示功能按钮；但在查询状态 status == 0 为真后，再次查询status==1 则进行报错，并且在没有权限的情况下，显示功能按钮。

这里作出猜想，因为在v-if判断status==0 的时候，进行了 是否status==1 等于1的判断；而再次查询后，status的值刷新为1时，在v-if判断是否 status==0 后，则直接进行了  是否status==1的判断，而status确实为1，则直接显示在页面，而后续权限才判断，告诉vue：你这不对啊，他没这个权限，不应该显示，然后以及渲染出来的节点不能直接删除，报了错。

解决方法

将v-permission作为首要判断条件，将v-if作用在按钮级别，即

<div v-if="status==0">
    <div @click="function1">
　　　　某按钮功能
　　</div>
</div>
<div  v-permission="['admin']">
    <div v-if="status==1" @click="function2">
　　　　某按钮功能
　　</div>
</div>

有明白原理的朋友可以和我说明

到此这篇关于vue中v-if 和v-permission 共同使用的坑及解决方案的文章就介绍到这了,更多相关vue中v-if 和v-permission 共同使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！