vue中v-if 和v-permission 共同使用的坑及解决方案
更新时间：2023年07月19日 08:34:43 作者：piaohd
这篇文章主要介绍了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 共同使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了Vue简单实现原理,结合实例形式详细分析了Vue实现原理与操作注意事项,需要的朋友可以参考下2020-05-05
一般我们的前端Vue项目中都会涉及到跨域的问题,下面这篇文章主要给大家介绍了关于vue项目部署跨域问题的详细解决过程,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2022-05-05
这篇文章主要给大家介绍了关于利用Vue构造器创建Form组件的通用解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2018-12-12
本篇文章主要介绍了详解如何在vue中使用sass，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-06-06
这篇文章主要为大家详细介绍了Vue实现简易记事本，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
打开尤大大的GitHub，发现多了个叫 petite-vue 的东西,Vue3 和 Vite 还没学完呢，又开始整新东西了？本文就来介绍一下2021-07-07
这篇文章主要为大家详细介绍了前端实现Vue组件页面跳转的多种方式,文中的示例代码讲解详细,具有一定的参考价值,有需要的小伙伴可以了解下2024-02-02
vue利用better-scroll实现轮播图与页面滚动详解
在我们日常的项目开发中，处理滚动和轮播图是再常见不过的需求了，下面这篇文章主要给大家介绍了关于vue利用better-scroll实现轮播图与页面滚动的相关资料，文中给出了详细的示例代码供大家参考学习，需要的朋友们下面来一起看看吧。2017-10-10
这篇文章主要介绍了vue3 vite配置跨域以及不生效问题,本文给大家分享完美解决方案，需要的朋友可以参考下2023-07-07
Vue组件和插件是Vue生态系统中的两种重要概念,它们分别服务于不同的目的,但都极大地丰富了Vue的功能性和可扩展性,下面我们就来看看二者的用法以及区别吧2024-03-03
最新评论