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

这篇具有很好参考价值的文章主要介绍了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 的区别

    v-if  和  v-show  是 Vue.js 中常用的条件渲染指令,它们的作用是根据条件来控制元素的显示与隐藏。 格式也差不多: 当 isShow 为 true 时显示当前元素,为 false 时隐藏 虽然它们的效果类似,但是它们在实现原理和使用场景上有一些区别。 1. 实现原理: v-if :根据条件动态添加

    2024年02月16日
    浏览(33)
  • VUE 中的 v-for 和 v-if 是否可以共存

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

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

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

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

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

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

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

    2024年02月08日
    浏览(47)
  • 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日
    浏览(32)
  • 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日
    浏览(59)
  • 若依系统v-hasPermi

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

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

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

    2024年02月13日
    浏览(33)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包