【Vue】组件中v-show不渲染问题的解决

最新推荐文章于 2024-08-21 16:41:56 发布
最新推荐文章于 2024-08-21 16:41:56 发布
阅读量4.2k 收藏 1
点赞数 1
分类专栏： Vue JavaScript 前端 文章标签： vue v-show不渲染 子组件v-show不渲染 v-show无效 js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/TalonZhang/article/details/104066711
版权
在uni-app开发中遇到v-show指令不更新视图的问题，尤其是在子组件中。当尝试通过父组件传入的值改变v-show控制的按钮显示时，点击事件虽然改变了数据，但视图并未重新渲染。经调试发现，直接在模板中修改的数据无法触发渲染。解决方法是使用$forceUpdate()或在methods中创建一个新的变量与需要修改的值绑定，然后操作这个新变量，以确保视图正确更新。
摘要由CSDN通过智能技术生成
问题：

在使用 uni-app 开发的时候，写了一个类似于微博的关注组件，功能就是未关注的文章显示+关注按钮 ，关注后按钮消失。使用 v-show 来写，用一个变量isFollow来监听，isFollow来自于父组件通过 props传递。

但是遇到一个问题就是：点击事件中修改isFollow的值之后，view 没有渲染，点击后关注按钮仍然存在，值确实已经发生改变，但 view 并没有重新渲染。

<view class="u-f-ac" v-show="!item.isFollow" @tap="follow">
	<view class="icon iconfont icon-zengjia"></view>
	关注
</view>
最低0.47元/天 解锁文章
Talon不会写代码
关注
专栏目录
Vue3-09-条件渲染-v-show 的基本使用
northcastle的博客
12-13 1512
vue3 中的 v-show 指令的使用
Vue3-10-条件渲染- 【v-if】和【v-show】的区别
northcastle的博客
12-13 173
vue3 中 v-if 指令 和 v-show 指令的区别
浏览器tab页不在当前页时推送iframe，切换到当前页时iframe渲染不出来
weixin_42794873的博客
01-28 611
在项目中遇到一个问题，浏览器tab页不在当前页时推送iframe，切换到当前页时iframe渲染不出来 // vue methods: { hanldeVisiblityChange() { if (document.visibilityState === 'hidden') { // 此页面不是浏览器当前正在显示的tab页 this.isCurrent = false } else if (document.visibilityState ===
解决v-show数据更新后，组件未重新渲染
yyc_two的博客
12-01 3340
使用数组长度作为v-show判断条件，数组变化后，组件未渲染出来。
vue中v-if和v-show的渲染问题（页面收到值却不展示的问题）
最新发布
xiao_166711的博客
08-21 242
解释的比较模糊，对这一块了解的不是很深入。只是在工作中碰到，用这样的方法解决的。有不对的地方还请大佬斧正。在使用v-if做隐藏时，会导致最后一个字段渲染失败，明明后台传了数据但是页面不显示。v-if隐藏时，那个字段就不会进行渲染了。此时可以用v-show试一下，隐藏字段但是保留占位。
关于v-show失效以及没有数据时渲染报错处理
qq_41430522的博客
03-17 1432
v-show不能使用在template上，不然失效，v-if可以 然后有时候你会发现，没有数据渲染会报错，啥cannot read 。。of undefined， 比如你再页面上写了{{result.row.name}} 但是你这次请求到的数据 压根没有row属性，只有个result空对象，如果你只是用result.row那就只显示个undefined，但是你还点一下name，那就会报错了，很常见的错误，啥cannot read 。。of undefined 关于这个错误，如果用的是v-if，其.
用v-show子组件dialog标题无法重新渲染的坑
weixin_42419575的博客
10-09 521
element table 多选表格selection-change方法slot-scope="scope"新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 selection-change方法 可以用表格中提供的@sele
vue中使用v-for渲染的页面无法通过v-if或v-show动态隐藏
糖长老莫小贝的博客
07-29 1860
当你的数剧层次太多，vue就没办法自动刷新 这时候可以手动强制刷新 this.$forceUpdate();
vue使用v-if v-show页面闪烁,div闪现的解决方法
10-17
在页面层次结构，数据较多的时候，用v-if或者v-show就会出现div闪现，或者部分闪烁的结果。怎么处理这样的问题呢，下面小编给大家带来了vue使用v-if v-show页面闪烁,div闪现的解决方法，一起看看吧
v-if 和v-show条件渲染
xyfck的博客
09-17 1098
v-if v-show的区别、使用
Vue3 echarts v-show无法重新渲染的问题
woflyoycm的博客
09-11 712
nextTick方法之后（Dom重新渲染）再去调用echarts图标的生成方法即可。这里需要引入nextTick方法。部分html代码如下。
【vue】v-show 显示/隐藏
m0_63070489的博客
04-11 546
【vue】v-show 显示/隐藏
vue基础语法（view层）
CIA的博客
10-25 2440
data选项 功能：data选项中存储的是页面中需要显示的数据， 是初始化数据的位置，是元数据，是vue实例的一个实例属性 可以接受的数据类型: number/string/boolean/array/json/undefined/null/function 常用模板语法 1.插值表达式{{xxx}} 在模板中输出变量,在插值表达式中是可以写JavaScript表达式的。 例如：{{1+2}}，但不能写语句。 2.基础指令 v-html 转义输出变量的HTML标签，可以让html标签里的内容
解决Vue数据更新数据不渲染问题
热门推荐
云海
08-30 2万+
Vue包装了数个数组操作函数，使用这些方法操作的数组去，其数据变动时会被vue监测：  push() pop() shift() unshift() splice() sort() reverse() vue2.0还增加个方法可以观测Vue.set(items, indexOfItem, newValue) filter(), concat(), slice() ...
11.Vue条件渲染v-if，v-show指令
cxrlover的博客
05-06 654
文章目录条件渲染v-if 条件渲染 条件渲染主要有两个指令v-if和v-show 接下来就分别说下这两个指令。 v-if v-if 指令用于条件性地渲染一块内容。 这块内容只会在指令的表达式返回为真的时候被渲染。 v-if在渲染的时候，如果条件为假的时候。v-if包含的内容是不会在页面结构中存在。 ...
解决vue 路由子组件created和mounted不起作用问题
洋洋洒洒做开发的专栏
12-12 1万+
解决vue 路由子组件created和mounted不起作用问题判断项目是否启用`keep-alive`启用未启用 判断项目是否启用keep-alive 启用 使用exclude排除组件(我没有成功不知道为什么)&amp;lt;keep-alive exclude=&quot;needExcludeComponentName&quot;&amp;gt; &amp;lt;router-view&amp;gt;&amp;lt;/router-
v-show渲染时数据不存在报错
weixin_46176363的博客
12-15 1072
v-show只要满足条件，视图将会渲染，渲染后条件为false时候，其实视图还存在，只不过是被display:none隐藏。这个时候如果之前通过v-show控制的元素的数据丢失就会报错，归根到底还是跟其渲染方式有关系，使用v-if可以解决问题。 v-if条件存在就会重新渲染视图，会触发v-if控制的元素的vue生命周期钩子函数，v-show不会。 ...
v-show不更新显示问题
A_Brave的博客
03-26 1925
问题 做uniapp项目的时候遇到使用v-show进行图片的切换（显示隐藏）发现v-show绑定的值变为true的时候，当前元素不进行更新 图片上传完成后赋值 如上图 employeeForm.idCardReverse有值的话就显示当前值的图片 没值的话就显示默认图片。 图片上传完成之后会给employeeForm.idCardReverse赋值。 打印结果也显示成功赋值，但是上传之前的employeeForm.idCardReverse值显示的是undefined而不是一个空字符。 于是寻找了一下
vue3中v-show使用
08-23
在Vue3中，v-show指令用于控制元素的显示与隐藏。与v-if不同的是，v-show在不满足条件时不会将元素从DOM中移除，而是通过修改元素的display属性来实现隐藏。这样可以节省一些渲染开销。 然而，在使用v-show的时候，...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值