VUE 若依框架，当页面设置了keepAlive=true，v-if和v-hasPermi作用在统一个按钮上时v-hasPermi失效，出现按钮显示异常问题

8月前作者：王stone 分类：Toy博客阅读(29) 违法举报

这篇具有很好参考价值的文章主要介绍了VUE 若依框架，当页面设置了keepAlive=true，v-if和v-hasPermi作用在统一个按钮上时v-hasPermi失效，出现按钮显示异常问题。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

当前列表页设置了缓存keepAlive=true，同时，在同一个按钮上使用v-if判断数据状态、用v-hasPermi判断按钮权限
当v-if的数据状态改变，由 ==1 变成 ==2 的时候，后面的v-hasPermi判断失效

VUE 若依框架，当页面设置了keepAlive=true，v-if和v-hasPermi作用在统一个按钮上时v-hasPermi失效，出现按钮显示异常问题,vue.js

原因：
是因为一开始页面初始化时，v-if 判断前两行为 true ，后两行没有在页面渲染元素，所以只校验了前两行的v-hsaPermi方法（v-if和v-show的区别），当后面修改了数据状态，v-if后两行为 true，由于页面设置了缓存，根本没有加载v-has-permi这个方法。
把v-if改为v-show即可，v-show不会移除元素，只是修改了css的样式为隐藏，这样进入当前列表页就会触发这四行的v-hsaPermi方法
VUE 若依框架，当页面设置了keepAlive=true，v-if和v-hasPermi作用在统一个按钮上时v-hasPermi失效，出现按钮显示异常问题,vue.js

文章来源地址https://www.toymoban.com/news/detail-773852.html

到了这里，关于VUE 若依框架，当页面设置了keepAlive=true，v-if和v-hasPermi作用在统一个按钮上时v-hasPermi失效，出现按钮显示异常问题的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：

领支付宝红包赞助服务器费用

Vue中v-if与v-show区别详解

在当今Web开发领域中，构建交互性强、可复用且易于维护的用户界面是至关重要的。而Vue.js作为一款现代化且流行的JavaScript框架，正是为了满足这些需求而诞生。它采用了MVVM架构模式，并通过数据驱动和组件化的方式，使我们能够更轻松地构建出优雅而高效的Web应用程序。

2024年01月21日
浏览(35)
VUE 中的 v-for 和 v-if 是否可以共存

要成功，先发疯，头脑简单往前冲！三金四银，金九银十，多学知识，也不能埋头苦干，要成功，先发疯，头脑简单往前冲！最近发现很多人也在问我 v-for 和 v-if 的面试问题，那么下面我就个大家分析一下！但是其实很多人都是背的，具体为啥会这样，很多人都没搞清楚

2024年01月18日
浏览(30)
【Vue项目搭建】修改【若依框架】的侧边栏、导航栏、面包屑样式、修改全局页面样式

掌握分寸感，找目标一致的人协同你，有效地调配资源，就可以提高效率。写在前面的话：博主最近想要搭建自己的前端若依项目，因此此系列博客会做一些记录。我的项目gitee地址： https://gitee.com/xuruicong/rachel-front-show 说明：只运行前端项目，只需要要下载官方项目http:

2024年01月19日
浏览(74)
vue v-if 和v-permission 共同使用的奇怪问题

后台系统某功能按钮需要订单状态和用户权限共同校验是否显示，将权限校验和v-if共同作用在同一div中，下方为实例代码在进行直接查询时无异常，没有显示功能按钮；但在查询状态 status == 0 为真后，再次查询status==1 则进行报错，并且在没有权限的情况下，显示功能按钮

2024年02月16日
浏览(32)
Vue.js 中的 v-if 和 v-show 有什么区别？

在 Vue.js 中，v-if 和 v-show 都是用来控制元素的显示和隐藏的指令。但是，它们之间有一些区别。本文将深入探讨 v-if 和 v-show 的区别，并给出一些相关的代码示例。 v-if 是一种条件渲染指令，它根据表达式的值来决定是否渲染元素。如果表达式的值为 true，那么元素将被渲染；

2024年02月08日
浏览(34)
vue: v-show 和 v-if 指令控制盒子的显示隐藏

1. v-show 语法: v-show=\\\"布尔值\\\" (true显示, false隐藏) 原理: 实质是在控制元素的 css 样式, `display: none;` 2. v-if 语法: v-if=\\\"布尔值\\\" (true显示, false隐藏) 原理: 实质是在动态的创建或者删除元素节点应用场景: 1. 如果是频繁的切换显

2024年02月09日
浏览(49)
vue中v-if和v-show的区别和使用场景

问题：v-if和v-show我们都经常用来控制某一部分内容的显示与隐藏，那么其具体区别是什么呢？ 1.v-if v-if是通过增添和删除DOM来控制元素的显示与隐藏的当判断值为true时在DOM树中加入该DOM元素当判断值为false时在DOM树中删除该DOM元素 2.v-show v-show是通过改变该元素

2024年02月03日
浏览(26)
若依系统v-hasPermi

为[文章页面]设置编辑修改权限 v-hasPermi=\\\"[\\\'system:article:edit\\\']\\\" 若依文档中的描述：

2024年02月11日
浏览(24)
若依的权限管理 v-hasPermi

v-hasPermi 用法：然后在后台管理系统的菜单栏中找到这个模块。把权限字符串 managementDocument-note-add 复制进去点击确定然后这个按钮的权限就设置好了希望有所帮助

2024年02月13日
浏览(26)
GuLi商城-前端基础Vue-指令v-if、v-show、v-else、v-else-if

2024年02月12日
浏览(33)