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虚拟Dom到真实Dom的转换，文中通过示例代码介绍的非常详细，需要的朋友们下面随着小编来一起学习学习吧2021-07-07
这篇文章主要介绍了详解vuex的简单todolist例子,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-07-07
这篇文章主要介绍了Vue使用正则校验文本框为正整数问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
这篇文章主要为大家详细介绍了VUE实现吸底按钮，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-03-03
虽然老早就看过很多echarts的例子,但自己接触的项目中一直都没有真正用到过,直到最近才开始真正使用,下面这篇文章主要给大家介绍了关于vue项目中echarts自适应问题的高级解决过程,需要的朋友可以参考下2023-05-05
本文描述了一个Vue3和Vite项目中实现版本更新检查的解决方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2024-11-11
element 结合vue 在表单验证时有值却提示错误的解决办法
这篇文章主要介绍了element 结合vue 在表单验证下，有值却提示错误的解决办法,需要的朋友可以参考下2018-01-01
这篇文章主要介绍了Vue中h函数和render函数的区别的相关资料,h函数是工具,负责创建节点, render函数是过程,负责组织节点并生成最终的虚拟DOM,文中通过代码介绍的非常详细,需要的朋友可以参考下2025-06-06
今天小编就为大家分享一篇axios对请求各种异常情况处理的封装方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
vue项目中使用particles实现粒子背景效果及遇到的坑(按钮没有点击响应)
为了提高页面展示效果，登录界面内容比较单一的，粒子效果作为背景经常使用到，vue工程中利用vue-particles可以很简单的实现页面的粒子背景效果，本文给大家分享在实现过程中遇到问题，需要的朋友一起看看吧2020-02-02
最新评论