在Vue中,通常有一种使用场景,就是在某个组件加载的时候,通过在js中改变某一个属性的值,然后利用这个属性的值对页面中的模板做一些操作,例如:控制某个标签展示或者不展示,或者控制模板页面中的某个按钮是否可以点击等。但是有时候,变量值修改了,但是模板却未刷新,这是因为数据和模板没有同时更新,可能模板已经渲染完毕数据才发生变化,本篇文章将介绍如何解决这个问题。
温馨提示:本博客已经发布小程序,可在微信小程序中搜索”百变码农”,手机上也能看!
1、示例代码
例如如下代码,需要根据show的值来控制div是否展示。
<template> <div> <div v-if="isShow">aaabbbccc</div> <div v-else>dddeeefff</div> </div> </template> <script> export default { data () { return { isShow: false }; }, monted () { this.$nextTick(() => { if (this.$route.query.type && this.$route.query.type === 1) { // 判断路由中query对象中的type字段是否为1,为1则展示aaabbbccc this.isShow = true; } console.log(this.isShow); // 加载本组件中的其他数据 this.loadPageData(); }); } } </script>
现象:在控制台打印出来的this.isShow已经变为false了,但是template模板中仍然显示的是dddeeefff,数据改变之后,模板没有重新渲染。
正常如果只加载该组件,一般不会出现这种现象,该现象在带有一些步骤的多个组件中,点下一步,然后回退到上一步,再点下一步的时候,可能页面就不会重新渲染了。
2、解决办法
利用Vue中的this.$forceUpdate()方法强制当前组件重新进行dom节点的渲染,修改之后的代码如下:
// 模板代码略...同上 <script> export default { data () { return { isShow: false }; }, monted () { this.$nextTick(() => { if (this.$route.query.type && this.$route.query.type === 1) { // 判断路由中query对象中的type字段是否为1,为1则展示aaabbbccc this.isShow = true; } console.log(this.isShow); // 强制重新渲染当前组件中的dom节点. this.$forceUpdate(); // 加载本组件中的其他数据 this.loadPageData(); }); } } </script>
加上如上橘色标注的代码this.$forceUpdate()即可解决改问题。
温馨提示:如果小程序端代码显示混乱,是因为移动端兼容性导致,可移步至PC端站点查看!
文章属于原创,如果转发请标注文章来源:个人小站【www.jinnianshizhunian.vip】
另外提供一些优秀的Java架构师及IT开发视频,书籍资料。无需注册,无需登录即可下载,免费下载地址:https://www.592xuexi.com