Vue2.0中模板中的属性值不生效问题

在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