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>

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

 

热门相关:峡谷正能量   富贵不能吟   金粉   上神来了   裙上之臣