【DataV】DataV组件库——更新数据视图不更新

2023-12-25 11:17:23

参考文章dataV组件库——改变数据视图不主动刷新

问题: 拿到后端数值就直接赋值了,但是视图(页面)没有更新。

解决: 官方文档介绍dataV里面的组件props均未设置deep监听,刷新props时,要直接生成新的props对象(基础数据类型除外),或完成赋值操作后使用ES6拓展运算符生成新的props对象(this.someProps = { …this.someProps }。

DataV官方文档

代码

<template>
  <div class="update-demo">
    <dv-percent-pond :config="config" style="width:200px;height:100px;" />
  </div>
</template>
 
<script>
export default {
  name: 'UpdateDemo',
  data () {
    return {
      config: {
        value: 66,
        lineDash: [10, 2]
      }
    }
  },
  methods: {
    // 更新数据的示例方法
    updateHandler () {
      const { config } = this
 
      /**
       * 只是这样做是无效
       * config指向的内存地址没有发生变化
       * 组件无法侦知数据变化
       */
      this.config.value = 90
      this.config.lineDash = [10, 4]
 
      /**
       * 使用ES6拓展运算符生成新的props对象
       * 组件侦知数据变化 自动刷新状态
       */
      this.config = { ...this.config }
    }
  }
}
</script>

文章来源:https://blog.csdn.net/qq_46123200/article/details/135192425
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。