背景

后台系统某功能按钮需要订单状态和用户权限共同校验是否显示，将权限校验和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>