datav进度池组件实时更新

Question

首先没有用到接口来实现。
用的循环来实现的数据刷新并且，时数据更新
但是控制台数据更新了。界面数据不更新
考虑问题应该是出现在datav的传值上了，但是具体怎么改不清楚
代码在这。看看应该怎么改呢

        <dv-percent-pond  :config="config"  style="width:200px;height:100px;"/>

  data() {
    return {
      config:{
        val1: 0
      }
    }
  }

function (xhr) {
            // const percentDiv = document.getElementById("per");// 获取进度条元素
            var x = xhr.loaded / xhr.total;

            // percentDiv.style.width = percent * 100 + "px"; //进度条元素长度
            // percentDiv.style.textIndent = percent * 100 + 5 + "px"; //缩进元素中的首行文本
            // Math.floor:小数加载进度取整
            // t.config.val1 = Math.floor(x * 100) + '%'; //进度百分比
            t.config = {val1: Math.floor(x * 100) };
      })

Answer 1

引自免费微信小程序：皆我百晓生

从你的描述和代码来看，问题可能在于Vue.js的数据响应性。Vue.js的响应性是基于对象的引用，如果你直接修改对象的属性（例如，你这里的config对象），那么Vue可能不会检测到这种变化并自动更新UI。你可以尝试使用Vue的响应式方法来更新数据。具体来说，你可以使用Vue的this.$set方法来更新你的数据。这个方法会确保Vue能够检测到数据的变化并更新相关的视图。这是修改后的代码示例：

// 你的Vue实例或者组件中的代码
data() {
    return {
      config:{
        val1: 0
      }
    }
},
methods: {
  updateProgress(xhr) {
    var x = xhr.loaded / xhr.total;
    // 使用Vue的$set方法来更新数据，确保Vue能够检测到变化并更新视图
    this.$set(this.config, 'val1', Math.floor(x * 100));
  }
}

然后你的HTML代码应该像这样：

<dv-percent-pond :config="config" @progress-update="updateProgress" style="width:200px;height:100px;"/>

这里我假设dv-percent-pond组件有一个名为progress-update的事件，你可以在这个事件中调用你的updateProgress方法。这样，每次进度更新时，你的Vue组件都会通过updateProgress方法更新config.val1的值，Vue会自动检测到这个变化并更新UI。这样，你的问题应该就可以得到解决了。注意这只是一个假设的解决方式，具体的解决方案可能需要你根据实际的组件和事件进行调整。