vue v-if未生效问题及解决
vue v-if未生效问题
事实证明，v-if本身是没有什么问题的，问题出在对应的变量身上。
前不久我使用VUE开发时遇到一个问题，好像v-if不起作用。
什么意思呢，v-if是一个条件表达式，当且仅当条件满足时才触发，但在我的程序中，它好像有时条件明明不满足，也会被触发。
这就很麻烦了。难道是VUE这个破烂不行？
事实上，VUE是没啥问题的，是我不行。
代码如图：
问题其实出在"edit"这个变量里。
如果将edit换成“true/false”，就一点问题没有，运行结果毫不含糊。
但换成变量就不一定了。
原因
我这些代码放在iView的一个模式对话框modal里，而modal的所谓关闭，其实只是隐藏，并没有从内存中去掉。
当再次打开时，edit还是上一次展现时用的值，但我没有意识到，总认为对话框重新出现时，上面的变量一定是新的。
我的思维，还停留在原始的网页开发上。众所周知，http协议是无状态的，网页关闭、打开，所有的信息都是重新初始化过的。
而现在vue等开发平台，默认是单页系统，只有一个页面，所有东西在上面，基本都是动态加载，一旦加载，默认又会缓存下来。
这样做好许多好处，节省资源，速度快，用户体验好。缺点，似乎是开发的复杂度增加了。
补充
v-if 与 v-show 的区别
二者都对应条件，当条件不满足时，v-if不加载，v-show加载但不显示。
在运行过程中，v-if的条件切换，由不满足到满足时，v-if对应组件加载。
但这有个过程。期间组件不一定能访问。
因此，需要将组件访问语句放在this.$nextTick里，以免报错。
<!-- 当edit为真，加载Editor组件，否则加载Report组件 --> <Report ref="report1" v-if="!edit" /> <Editor ref="editor1" v-if="edit" />
checkOver () { // 校核归来
this.edit = false
let _this = this
this.$nextTick(() => {
_this.$refs.report1.init(_this.id)
})
},
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要给大家介绍了关于如何解决前端调用后端接口返回200但数据返回的是html标签的相关资料,文中通过图文将解决的过程介绍的非常详细,对同样遇到这个问题的朋友具有一定的参考解决价值,需要的朋友可以参考下2024-05-05
使用vue-antDesign menu页面方式(添加面包屑跳转)
这篇文章主要介绍了使用vue-antDesign menu页面方式(添加面包屑跳转),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-01-01
这篇文章主要为大家详细介绍了require.js+vue+vue-router+vue-resource开发微信上传图片组件,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-10-10
Element-Plus el-col、el-row快速布局及使用方法
这篇文章主要介绍了Element-Plus el-col、el-row快速布局及使用方法,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-12-12
这篇文章主要介绍了关于应用UI组件的移动端适配方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
springboot + vue+elementUI实现图片上传功能
文章描述了如何使用Element UI的el-upload组件实现前端图片上传,并将图片存储到后端数据库,同时在页面上回显上传的图片,后端通过接口接收图片,并将其存储在指定位置,然后返回图片路径以便在前端显示,本文给大家介绍的非常详细,感兴趣的朋友一起看看吧2025-01-01
这篇文章主要为大家详细介绍了vue实现扫码功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-01-01
npm ERR! code E404在vscode安装插件时报错的两种解决方案
这篇文章主要给大家介绍了关于npm ERR! code E404在vscode安装插件时报错的两种解决方案,关于这个问题,通常是由于插件名称输入错误、网络问题或插件已被删除引起的,文中将两种解决方法都介绍的非常详细,需要的朋友可以参考下2023-04-04
这篇文章主要为大家介绍了Transition内置组件使用示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-07-07
Vue实现获取后端接口API代码片段(已封装Service方法名)
Vue实现获取后端接口API代码片段(已封装Service方法名)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
最新评论