想必大家都遇到了在vue项目中更新了data数据后视图并不会更新的问题。 我遇到这个主要是在一个weex的UI组件库项目中,因为组件库一部分组件是使用vue在weex下实现的,一部分组件是原生实现的,即不需要导入直接传值使用,移动端原生app会自动解析数据渲染,我这里是使用了原生的组件做了一个示例修改了数据后原生组件视图并没有更新,主要功能是根据状态码判断是否显示当前组件,define-view为自定义组件:
伪代码如下:

<div v-if="chartIsShow" v-if="statusCode==2||statusCode==4||statusCode==5">
  <define-view  :data="Config" ></define-view>
</div>

用了几中常规的办法都不能解决
因为更新的是对象类型的数组所以顺其自然使用了Vue.set,第一种,没有效果

this.$set(this.xxxData, 'params', value)

第二种:强制渲染,即更新数据后强制重新渲染组件也没效果

this.$forceUpdate()

都无效,但是我发现是只要切换组件的v-if状态后就会渲染成功一次,如果同种状态修更新数据那就不会成功,所以一定要在更改数据后重新渲染组件才可以,于是想到了 nextTick,代码如下:

statusCode(newVal){
  this.chartIsShow = false
  if (newVal==2||newVal==4||newVal == 5) {
    this.$nextTick(()=>{
        this.chartIsShow = true
    })
  }
}

解决方法大概是状态改变了后切换组件的状态,当符合条件,则重新渲染即可,试了一下,是块老铁,没毛病。

Logo

前往低代码交流专区

更多推荐